From 25f446d22a7c4587bb7cd05faf500af97b46bfdf Mon Sep 17 00:00:00 2001
From: liberty <zhuizhuidea@gmail.com>
Date: Tue, 16 May 2023 08:52:12 +0800
Subject: [PATCH] feat: show hidden, required, Read only

---
 examples/views/formEditor/actionList.vue      |   4 +-
 package.json                                  |   2 +
 .../formEditor/components/CompleteButton.vue  |   9 +-
 .../components/Layout/DragGable.jsx           |  46 +-
 .../Config/components/LogicComponent.vue      |  61 ++-
 .../Config/components}/generateFilterdata.js  |  44 +-
 packages/formEditor/preview.vue               |  27 +-
 packages/hooks/index.js                       |   9 +-
 packages/hooks/use-logic/index.js             | 170 ++++++-
 packages/hooks/use-props/index.js             |  27 +-
 .../formEditor/ConfigLogicComponent.scss      |   5 +
 pnpm-lock.yaml                                | 456 +++++++++++++++++-
 test/logic/data/preo.json                     |   1 +
 test/logic/dd.test.js                         |  40 ++
 test/logic/validator/Region.test.js           |  27 +-
 vite.config.js                                |   8 +-
 16 files changed, 824 insertions(+), 112 deletions(-)
 rename packages/{utils => formEditor/components/Panels/Config/components}/generateFilterdata.js (91%)
 create mode 100644 test/logic/data/preo.json
 create mode 100644 test/logic/dd.test.js

diff --git a/examples/views/formEditor/actionList.vue b/examples/views/formEditor/actionList.vue
index ba05836..4864a00 100644
--- a/examples/views/formEditor/actionList.vue
+++ b/examples/views/formEditor/actionList.vue
@@ -33,10 +33,10 @@ const getAllActions = async () => {
 const handleDel = async (id) => {
   loading.value = true
   try {
-    await hooks.useFetch(`${uri.obj}/${id}`, {
+    await hooks.useFetch(`${uri.obj}/${route.params.objid}/action/${id}`, {
       method: 'delete'
     })
-    getAllobjs()
+    getAllActions()
   } finally {
     loading.value = false
   }
diff --git a/package.json b/package.json
index 05cfc3d..4024c72 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@vant/area-data": "^1.4.0",
     "@vant/touch-emulator": "^1.4.0",
     "@vue/shared": "^3.2.45",
+    "@vue/test-utils": "^2.3.2",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "async": "^3.2.4",
@@ -49,6 +50,7 @@
     "dayjs": "^1.11.7",
     "element-plus": "^2.2.28",
     "everright-filter": "^0.0.21",
+    "jsdom": "^22.0.0",
     "jss": "^10.9.2",
     "jss-preset-default": "^10.9.2",
     "lodash-es": "^4.17.21",
diff --git a/packages/formEditor/components/CompleteButton.vue b/packages/formEditor/components/CompleteButton.vue
index 5c56bcd..e4d44e0 100644
--- a/packages/formEditor/components/CompleteButton.vue
+++ b/packages/formEditor/components/CompleteButton.vue
@@ -27,21 +27,14 @@ const handleClick = async (type) => {
   if (props.mode === 'preview') return false
   try {
     await Promise.resolve(unref(props.handle).validate())
+    // await ER.checkFieldsValidation()
     ER.emit('listener', {
       type: 'submit',
       data: ER.getData()
     })
-    // console.log(JSON.stringify(_.cloneDeep(result)))
   } catch (e) {
     console.log(e)
   }
-  // unref(props.handle).validate().then(() => {
-  //   const result = {}
-  //   ER.state.allFields.forEach(e => {
-  //     result[e.key] = e.options.defaultValue
-  //   })
-  //   console.log(_.cloneDeep(result))
-  // })
 }
 </script>
 <template>
diff --git a/packages/formEditor/components/Layout/DragGable.jsx b/packages/formEditor/components/Layout/DragGable.jsx
index 705c5cf..245a54c 100644
--- a/packages/formEditor/components/Layout/DragGable.jsx
+++ b/packages/formEditor/components/Layout/DragGable.jsx
@@ -145,28 +145,30 @@ export default defineComponent({
             break
           default:
             let TypeComponent = ''
-            const typeProps = hooks.useProps(state, element, unref(isPc))
-            TypeComponent = load.findComponent('FormTypes', element.type)
-            if (unref(isPc)) {
-              node = (
-                <Selection hasWidthScale hasCopy hasDel hasDrag hasMask data={element} parent={props.data}>
-                  {
-                    element.type !== 'divider'
-                      ? (<el-form-item
-                        {...typeProps.value}
-                      >
-                        <TypeComponent data={element} params={typeProps.value}></TypeComponent>
-                      </el-form-item>)
-                      : <TypeComponent data={element} params={typeProps.value}></TypeComponent>
-                  }
-                </Selection>
-              )
-            } else {
-              node = (
-                <Selection hasWidthScale hasCopy hasDel hasDrag hasMask data={element} parent={props.data}>
-                  <TypeComponent data={element} params={typeProps.value}></TypeComponent>
-                </Selection>
-              )
+            if (unref(isEditModel) || _.get(state.fieldsLogicState.get(element), 'visibility', undefined) !== 0) {
+              const typeProps = hooks.useProps(state, element, unref(isPc))
+              TypeComponent = load.findComponent('FormTypes', element.type)
+              if (unref(isPc)) {
+                node = (
+                  <Selection hasWidthScale hasCopy hasDel hasDrag hasMask data={element} parent={props.data}>
+                    {
+                      element.type !== 'divider'
+                        ? (<el-form-item
+                          {...typeProps.value}
+                        >
+                          <TypeComponent data={element} params={typeProps.value}></TypeComponent>
+                        </el-form-item>)
+                        : <TypeComponent data={element} params={typeProps.value}></TypeComponent>
+                    }
+                  </Selection>
+                )
+              } else {
+                node = (
+                  <Selection hasWidthScale hasCopy hasDel hasDrag hasMask data={element} parent={props.data}>
+                    <TypeComponent data={element} params={typeProps.value}></TypeComponent>
+                  </Selection>
+                )
+              }
             }
             break
         }
diff --git a/packages/formEditor/components/Panels/Config/components/LogicComponent.vue b/packages/formEditor/components/Panels/Config/components/LogicComponent.vue
index 5ed55d0..51ae077 100644
--- a/packages/formEditor/components/Panels/Config/components/LogicComponent.vue
+++ b/packages/formEditor/components/Panels/Config/components/LogicComponent.vue
@@ -1,9 +1,14 @@
 <script>
 import { ref, inject, nextTick, reactive, computed, watch, onMounted } from 'vue'
 import hooks from '@ER/hooks'
-import utils from '@ER/utils'
+import {
+  generateIfFilterOptionsData,
+  generateIfFilterConditionsData,
+  generateThenFilterOptionsData,
+  generateThenFilterConditionsData
+} from './generateFilterdata.js'
 import _ from 'lodash-es'
-import { EverrightFilter } from 'everright-filter'
+import { EverrightFilter } from 'everright-filter/dist/Everright-filter.js'
 import Icon from '@ER/icon'
 export default {
   name: 'ConfigLogicComponent'
@@ -28,22 +33,29 @@ const tabs = ref([
     thenRefs: []
   },
   {
-    label: '校验',
-    value: 'validation',
+    label: '必填',
+    value: 'required',
     rules: [],
     ifRefs: [],
     thenRefs: []
   },
   {
-    label: '必填',
-    value: 'required',
+    label: '只读',
+    value: 'readOnly',
     rules: [],
     ifRefs: [],
     thenRefs: []
   }
+  // {
+  //   label: '校验',
+  //   value: 'validation',
+  //   rules: [],
+  //   ifRefs: [],
+  //   thenRefs: []
+  // }
 ])
 window.tabs = tabs
-const activeTab = ref('showHidden')
+const activeTab = ref('readOnly')
 const emit = defineEmits(['update:modelValue'])
 const ER = inject('Everright')
 const scrollbarRef = ref()
@@ -55,28 +67,28 @@ const {
 const getIfOptions = (type) => async () => {
   return new Promise((resolve, reject) => {
     resolve({
-      data: utils.generateIfFilterOptionsData(type, state.fields)
+      data: generateIfFilterOptionsData(type, state.fields)
     })
   })
 }
 const getIfConditions = (type) => async ({ property }) => {
   return new Promise((resolve, reject) => {
     resolve({
-      data: utils.generateIfFilterConditionsData(type, state, property)
+      data: generateIfFilterConditionsData(type, state, property)
     })
   })
 }
 const getThenOptions = (type) => async () => {
   return new Promise((resolve, reject) => {
     resolve({
-      data: utils.generateThenFilterOptionsData(type, state.fields)
+      data: generateThenFilterOptionsData(type, state.fields)
     })
   })
 }
 const getThenConditions = (type) => async ({ property }) => {
   return new Promise((resolve, reject) => {
     resolve({
-      data: utils.generateThenFilterConditionsData(type, state.fields)
+      data: generateThenFilterConditionsData(type, state.fields)
     })
   })
 }
@@ -187,11 +199,34 @@ const handleListener = (ruleType, index, tab, { type, data }) => {
           case 'showHidden':
             _.last(tab.thenRefs).pushData('show')
             break
+          case 'required':
+            _.last(tab.thenRefs).pushData('required')
+            break
+          case 'readOnly':
+            _.last(tab.thenRefs).pushData('readOnly')
+            break
         }
       }
     }
   }
 }
+const addRuleHandler = (tab) => {
+  switch (activeTab.value) {
+    case 'validation':
+      _.last(tab.thenRefs).pushData('message')
+      break
+    case 'showHidden':
+      _.last(tab.thenRefs).pushData('show')
+      break
+    case 'required':
+      _.last(tab.thenRefs).pushData('required')
+      break
+    case 'readOnly':
+      _.last(tab.thenRefs).pushData('readOnly')
+      break
+  }
+  return false
+}
 const handleClosed = () => {
   tabs.value.forEach(tab => {
     tab.rules = []
@@ -226,13 +261,15 @@ const handleClosed = () => {
                     :getConditions="getIfConditions(tab.value)"
                   />
                 </div>
-                <div :class="ns.e('then')">
+                <div :class="[ns.e('then'), ns.e(`${tab.value}then`)]">
                   <h2>Then</h2>
                   <EverrightFilter
                     :ref="relationalRef(tab, 'thenRefs', index)"
                     :lang="ER.props.lang"
+                    :canAddRule="() => addRuleHandler(tab)"
                     @listener="(e) => handleListener('then', index, tab, e)"
                     :getOptions="getThenOptions(tab.value)"
+                    :rule-limit="tab.value === 'required' ? 2 : tab.value === 'validation' ? 1 : -1"
                     :getConditions="getThenConditions(tab.value)"
                   />
                 </div>
diff --git a/packages/utils/generateFilterdata.js b/packages/formEditor/components/Panels/Config/components/generateFilterdata.js
similarity index 91%
rename from packages/utils/generateFilterdata.js
rename to packages/formEditor/components/Panels/Config/components/generateFilterdata.js
index 802ee50..ae9ef58 100644
--- a/packages/utils/generateFilterdata.js
+++ b/packages/formEditor/components/Panels/Config/components/generateFilterdata.js
@@ -138,7 +138,6 @@ const generateIfFilterOptionsData = (activeTab, fields) => {
         filterNode.renderType = 'REGION'
         filterNode.operatorKey = 'Region'
         filterNode.selectType = node.options.selectType
-        console.log(filterNode.selectType)
         break
       case 'date':
         filterNode.renderType = 'DATE'
@@ -322,7 +321,15 @@ const generateThenFilterOptionsData = (activeTab, fields) => {
       break
     case 'required':
       result = {
-        options: generateIfFilterOptionsData(activeTab, fields).options,
+        options: [
+          {
+            label: '',
+            value: 'required',
+            renderType: 'SELECT',
+            operatorKey: 'Text',
+            multiple: true
+          }
+        ],
         operators: {
           Text: [
             {
@@ -338,16 +345,39 @@ const generateThenFilterOptionsData = (activeTab, fields) => {
           ]
         }
       }
-      result.options.forEach(e => {
-        e.renderType = 'TEXT'
-        e.operatorKey = 'Text'
-      })
+      break
+    case 'readOnly':
+      result = {
+        options: [
+          {
+            label: '',
+            value: 'readOnly',
+            renderType: 'SELECT',
+            operatorKey: 'Text',
+            multiple: true
+          }
+        ],
+        operators: {
+          Text: [
+            {
+              label: '只读',
+              value: 'readOnly',
+              style: 'noop'
+            },
+            {
+              label: '可编辑',
+              value: 'editable',
+              style: 'noop'
+            }
+          ]
+        }
+      }
       break
     case 'validation':
       result = {
         options: [
           {
-            label: '提示语',
+            label: '提示内容',
             value: 'message',
             renderType: 'TEXT',
             isShowOperator: false,
diff --git a/packages/formEditor/preview.vue b/packages/formEditor/preview.vue
index e5e3190..3213c2c 100644
--- a/packages/formEditor/preview.vue
+++ b/packages/formEditor/preview.vue
@@ -5,6 +5,8 @@ import hooks from '@ER/hooks'
 import utils from '@ER/utils'
 import _ from 'lodash-es'
 import defaultProps from './defaultProps'
+import { ElMessage } from 'element-plus'
+import { showNotify } from 'vant'
 export default {
   name: 'Everright-form-preview'
 }
@@ -26,11 +28,31 @@ const state = reactive({
   validateStates: [],
   data: {},
   fields: [],
-  logic: {}
+  logic: {},
+  // fieldsVisibility: ref(new WeakMap()),
+  // fieldsRequired: ref(new WeakMap()),
+  // fieldsValidation: new Map(),
+  fieldsLogicState: new Map()
 })
-console.log(hooks)
 const ns = hooks.useNamespace('Main', state.Namespace)
 hooks.useLogic(state)
+// const checkFieldsValidation = async () => {
+//   for (const [key, value] of state.fieldsValidation) {
+//     if (value) {
+//       if (utils.isPc()) {
+//         ElMessage({
+//           message: key.value,
+//           type: 'warning'
+//         })
+//       } else {
+//         showNotify({ type: 'warning', message: key.value })
+//       }
+//       return Promise.reject(key)
+//     }
+//   }
+//   return Promise.resolve()
+// }
+// window.checkFieldsValidation = checkFieldsValidation
 const getData = () => {
   const result = {}
   state.fields.forEach(e => {
@@ -43,6 +65,7 @@ provide('Everright', {
   emit,
   getData,
   props
+  // checkFieldsValidation
 })
 window.state = state
 const setData2 = (data, value) => {
diff --git a/packages/hooks/index.js b/packages/hooks/index.js
index dc6edba..1b3bb9f 100644
--- a/packages/hooks/index.js
+++ b/packages/hooks/index.js
@@ -2,8 +2,13 @@ import _ from 'lodash-es'
 const importModules = import.meta.glob('./*/index.js', { eager: true })
 const modules = {}
 _.forIn(importModules, (func, path) => {
-  const key = _.head(Object.keys(func))
-  modules[key] = func[key]
+  // console.log(func)
+  // const key = _.head(Object.keys(func))
+  Object.keys(func).forEach(key => {
+    if (/^use[A-Z]\w/.test(key)) {
+      modules[key] = func[key]
+    }
+  })
 })
 export default {
   ...modules
diff --git a/packages/hooks/use-logic/index.js b/packages/hooks/use-logic/index.js
index 407d81c..651c6f3 100644
--- a/packages/hooks/use-logic/index.js
+++ b/packages/hooks/use-logic/index.js
@@ -23,7 +23,7 @@ const findValidityRule = (state) => {
   return result
 }
 const findFieldsByid = (list, fields) => _.intersectionBy(fields, list.map(e => ({ id: e })), 'id')
-const getAreaType = (code) => {
+export const getAreaType = (code) => {
   const val = String(code)
   if (val.substring(0, 2) !== '00' && val.substring(2, 4) === '00') {
     return 1
@@ -203,34 +203,156 @@ export const validator = (logic, value, field) => {
   }
   return result
 }
-const operatingShowHidden = (fields, rules) => {
-  rules.forEach(rule => {
-    const targetFields = findFieldsByid(rule.if.conditions.map(e => e.property), fields)
-    // console.log(rule.if.logicalOperator)
-    const operator = (v) => rule.if.logicalOperator === 'and' ? v.every(v => v) : v.some(v => v)
-    // console.log(targetFields)
-    // console.log(rule)
-    // watch(() => [targetFields[0].options.defaultValue], () => {
-    watch(() => targetFields.map(e => e.options.defaultValue), (values) => {
-      // console.log(values)
-      // console.log(operator(values.map((value, index) => validator(rule.if.conditions[index], value, getDataType(targetFields[index].type)))))
-      console.log(operator(values.map((value, index) => validator(rule.if.conditions[index], value, targetFields[index]))))
-      // console.log(values.map((value, index) => validator(rule.if.conditions[index], value, getDataType(targetFields[index].type))))
-    }, {
-      immediate: true,
-      deep: true
-    })
-    // console.log(rule.if.conditions.map(e => e.property))
+// const operatingShowHidden = (fields, rules) => {
+//   rules.forEach(rule => {
+//     const targetFields = findFieldsByid(rule.if.conditions.map(e => e.property), fields)
+//     const operator = (v) => rule.if.logicalOperator === 'and' ? v.every(v => v) : v.some(v => v)
+//     console.log(rule)
+//     watch(() => targetFields.map(e => e.options.defaultValue), (values) => {
+//       console.log(operator(values.map((value, index) => validator(rule.if.conditions[index], value, targetFields[index]))))
+//     }, {
+//       immediate: true,
+//       deep: true
+//     })
+//     // console.log(rule.if.conditions.map(e => e.property))
+//   })
+// }
+const changeState = (fieldsLogicState, field, key, value) => {
+  if (!fieldsLogicState.has(field)) {
+    fieldsLogicState.set(field, {})
+  }
+  fieldsLogicState.get(field)[key] = value
+}
+const operatingShowHidden = (isValidation, rule, fields, fieldsLogicState) => {
+  _.get(rule, 'then.conditions', []).forEach(condition => {
+    switch (condition.property) {
+      case 'show':
+        if (isValidation) {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            changeState(fieldsLogicState, field, 'visibility', 1)
+          })
+        } else {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            changeState(fieldsLogicState, field, 'visibility', 0)
+          })
+        }
+        break
+      case 'hide':
+        if (isValidation) {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            changeState(fieldsLogicState, field, 'visibility', 0)
+          })
+        } else {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            changeState(fieldsLogicState, field, 'visibility', 1)
+          })
+        }
+        break
+    }
+  })
+}
+const operatingRequired = (isValidation, rule, fields, fieldsLogicState) => {
+  _.get(rule, 'then.conditions', []).forEach(condition => {
+    switch (condition.operator) {
+      case 'required':
+        if (isValidation) {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            // fieldsRequired.set(field, 1)
+            changeState(fieldsLogicState, field, 'required', 1)
+          })
+        } else {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            // fieldsRequired.set(field, 0)
+            changeState(fieldsLogicState, field, 'required', 0)
+          })
+        }
+        break
+      case 'not_required':
+        if (isValidation) {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            // fieldsRequired.set(field, 0)
+            changeState(fieldsLogicState, field, 'required', 0)
+          })
+        } else {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            // fieldsRequired.set(field, 1)
+            changeState(fieldsLogicState, field, 'required', 1)
+          })
+        }
+        break
+    }
+  })
+}
+const operatingReadOnly = (isValidation, rule, fields, fieldsLogicState) => {
+  _.get(rule, 'then.conditions', []).forEach(condition => {
+    switch (condition.operator) {
+      case 'readOnly':
+        if (isValidation) {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            changeState(fieldsLogicState, field, 'readOnly', 1)
+          })
+        } else {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            changeState(fieldsLogicState, field, 'readOnly', 0)
+          })
+        }
+        break
+      case 'editable':
+        if (isValidation) {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            changeState(fieldsLogicState, field, 'readOnly', 0)
+          })
+        } else {
+          findFieldsByid(condition.value, state.fields).forEach(field => {
+            changeState(fieldsLogicState, field, 'readOnly', 1)
+          })
+        }
+        break
+    }
+  })
+}
+const operatingValidation = (isValidation, rule, fields, fieldsLogicState) => {
+  _.get(rule, 'then.conditions', []).forEach(condition => {
+    if (isValidation) {
+      fieldsValidation.set(condition, 1)
+    } else {
+      fieldsValidation.delete(condition)
+    }
   })
 }
 const listenEvent = (state) => {
   const rules = findValidityRule(state)
   for (const type in rules) {
-    switch (type) {
-      case 'showHidden':
-        operatingShowHidden(state.fields, rules[type])
-        break
-    }
+    rules[type].forEach(rule => {
+      const targetFields = findFieldsByid(rule.if.conditions.map(e => e.property), state.fields)
+      const operator = (v) => rule.if.logicalOperator === 'and' ? v.every(v => v) : v.some(v => v)
+      // console.log(rule)
+      watch(() => targetFields.map(e => e.options.defaultValue), (values) => {
+        // console.log(operator(values.map((value, index) => validator(rule.if.conditions[index], value, targetFields[index]))))
+        switch (type) {
+          case 'showHidden':
+            operatingShowHidden(operator(values.map((value, index) => validator(rule.if.conditions[index], value, targetFields[index]))), rule, state.fields, state.fieldsLogicState)
+            break
+          case 'required':
+            operatingRequired(operator(values.map((value, index) => validator(rule.if.conditions[index], value, targetFields[index]))), rule, state.fields, state.fieldsLogicState)
+            break
+          case 'readOnly':
+            operatingReadOnly(operator(values.map((value, index) => validator(rule.if.conditions[index], value, targetFields[index]))), rule, state.fields, state.fieldsLogicState)
+            break
+          // case 'validation':
+          //   operatingValidation(operator(values.map((value, index) => validator(rule.if.conditions[index], value, targetFields[index]))), rule, state.fields, state.fieldsValidation)
+          //   break
+        }
+      }, {
+        immediate: true,
+        deep: true
+      })
+    })
+    // switch (type) {
+    //   case 'showHidden':
+    //     operatingShowHidden(state.fields, rules[type])
+    //     break
+    // }
   }
 }
 export const useLogic = (state) => {
diff --git a/packages/hooks/use-props/index.js b/packages/hooks/use-props/index.js
index d4cf02c..cc9898d 100644
--- a/packages/hooks/use-props/index.js
+++ b/packages/hooks/use-props/index.js
@@ -57,7 +57,7 @@ const addValidate = (result, node, isPc, t) => {
     }
     const newValue = options.isShowTrim ? value.trim() : value
     // if (options.required && (!newValue || newValue === null || newValue === undefined || (Array.isArray(newValue) && !newValue.length))) {
-    if (options.required && (newValue === '' || newValue === null || newValue === undefined || (Array.isArray(newValue) && !newValue.length))) {
+    if (result.required && (newValue === '' || newValue === null || newValue === undefined || (Array.isArray(newValue) && !newValue.length))) {
       reject(t('er.validateMsg.required'))
       return
     }
@@ -152,17 +152,24 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
       clearable: options.clearable,
       required: options.required
     }
+    if (state.mode !== 'edit') {
+      const fieldState = state.fieldsLogicState.get(node)
+      const required = _.get(fieldState, 'required', undefined)
+      const readOnly = _.get(fieldState, 'readOnly', undefined)
+      if (readOnly === undefined) {
+        result.disabled = options.disabled
+      } else {
+        result.disabled = readOnly === 1
+      }
+      if (required === undefined) {
+        result.required = result.disabled ? false : result.required
+      } else {
+        result.required = result.disabled ? false : required === 1
+      }
+    }
+    addValidate(result, node, isPc, t)
     if (isPc) {
-      addValidate(result, node, isPc, t)
-      // result.style = {
-      //   width: options.width + options.widthType
-      // }
       result.labelWidth = options.isShowLabel ? options.labelWidth + 'px' : 'auto'
-      // result.labelWidth = !options.isShowLabel && 'auto'
-    } else {
-      // result.labelWidth = options.isShowLabel ? options.labelWidth + 'px' : 'auto'
-      addValidate(result, node, isPc, t)
-      // result.label = node.label
     }
     switch (node.type) {
       case 'input':
diff --git a/packages/theme/formEditor/ConfigLogicComponent.scss b/packages/theme/formEditor/ConfigLogicComponent.scss
index 6d4262d..8f9394d 100644
--- a/packages/theme/formEditor/ConfigLogicComponent.scss
+++ b/packages/theme/formEditor/ConfigLogicComponent.scss
@@ -28,6 +28,11 @@
       display: none;
     }
   }
+  @include e((requiredthen, readOnlythen)) {
+    .Everright-filter-TriggerComponent {
+      display: none;
+    }
+  }
   .Everright-filter-FilterItem{
     background: none;
     margin-top: 0;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fcd67f5..be62c71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,7 @@ specifiers:
   '@vitejs/plugin-vue-jsx': ^2.1.1
   '@vue/compiler-sfc': ^3.2.47
   '@vue/shared': ^3.2.45
+  '@vue/test-utils': ^2.3.2
   '@vuelidate/core': ^2.0.0
   '@vuelidate/validators': ^2.0.0
   async: ^3.2.4
@@ -35,6 +36,7 @@ specifiers:
   everright-filter: ^0.0.21
   express: ^4.18.2
   husky: ^8.0.3
+  jsdom: ^22.0.0
   jss: ^10.9.2
   jss-preset-default: ^10.9.2
   lint-staged: ^13.1.2
@@ -57,6 +59,7 @@ dependencies:
   '@vant/area-data': registry.npmmirror.com/@vant/area-data/1.4.1
   '@vant/touch-emulator': registry.npmmirror.com/@vant/touch-emulator/1.4.0
   '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.47
+  '@vue/test-utils': 2.3.2_vue@3.2.47
   '@vuelidate/core': registry.npmmirror.com/@vuelidate/core/2.0.0_vue@3.2.47
   '@vuelidate/validators': registry.npmmirror.com/@vuelidate/validators/2.0.0_vue@3.2.47
   async: registry.npmmirror.com/async/3.2.4
@@ -64,6 +67,7 @@ dependencies:
   dayjs: registry.npmmirror.com/dayjs/1.11.7
   element-plus: registry.npmmirror.com/element-plus/2.3.1_vue@3.2.47
   everright-filter: 0.0.21_ap7lbsygcc6j7vt74w6nzwfhdi
+  jsdom: 22.0.0
   jss: registry.npmmirror.com/jss/10.10.0
   jss-preset-default: registry.npmmirror.com/jss-preset-default/10.10.0
   lodash-es: registry.npmmirror.com/lodash-es/4.17.21
@@ -105,11 +109,42 @@ devDependencies:
   sass: registry.npmmirror.com/sass/1.59.3
   vite: registry.npmmirror.com/vite/3.2.5_sass@1.59.3
   vite-plugin-eslint: registry.npmmirror.com/vite-plugin-eslint/1.8.1_eslint@8.36.0+vite@3.2.5
-  vitest: 0.31.0_sass@1.59.3
+  vitest: 0.31.0_jsdom@22.0.0+sass@1.59.3
   vue-router: registry.npmmirror.com/vue-router/4.1.6_vue@3.2.47
 
 packages:
 
+  /@babel/helper-string-parser/7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+    optional: true
+
+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+    optional: true
+
+  /@babel/parser/7.21.3:
+    resolution: {integrity: sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.21.3
+    dev: false
+    optional: true
+
+  /@babel/types/7.21.3:
+    resolution: {integrity: sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: false
+    optional: true
+
   /@esbuild/android-arm/0.15.18:
     resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==}
     engines: {node: '>=12'}
@@ -136,6 +171,10 @@ packages:
     resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
     dev: false
 
+  /@tootallnate/once/2.0.0:
+    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
+    engines: {node: '>= 10'}
+
   /@types/chai-subset/1.3.3:
     resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
     dependencies:
@@ -193,13 +232,63 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
+  /@vue/compiler-core/3.2.47:
+    resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
+    dependencies:
+      '@babel/parser': 7.21.3
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: false
+    optional: true
+
+  /@vue/compiler-dom/3.2.47:
+    resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
+    dependencies:
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+    dev: false
+    optional: true
+
+  /@vue/compiler-ssr/3.2.47:
+    resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/shared': 3.2.47
+    dev: false
+    optional: true
+
   /@vue/devtools-api/6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
     dev: false
 
+  /@vue/server-renderer/3.2.47_vue@3.2.47:
+    resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==}
+    requiresBuild: true
+    peerDependencies:
+      vue: 3.2.47
+    dependencies:
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/shared': 3.2.47
+      vue: registry.npmmirror.com/vue/3.2.47
+    dev: false
+    optional: true
+
   /@vue/shared/3.2.47:
     resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
 
+  /@vue/test-utils/2.3.2_vue@3.2.47:
+    resolution: {integrity: sha512-hJnVaYhbrIm0yBS0+e1Y0Sj85cMyAi+PAbK4JHqMRUZ6S622Goa+G7QzkRSyvCteG8wop7tipuEbHoZo26wsSA==}
+    peerDependencies:
+      vue: ^3.0.1
+    dependencies:
+      js-beautify: 1.14.6
+      vue: registry.npmmirror.com/vue/3.2.47
+    optionalDependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/server-renderer': 3.2.47_vue@3.2.47
+    dev: false
+
   /@vuelidate/core/2.0.0_vue@3.2.47:
     resolution: {integrity: sha512-xIFgdQlScO0aaSZ0wTGPJh8YcTMNAj5veI8yPgiAyxOT+GV7vNQFiU1vpYWCL4cklkkhYvRRSC2OEX7YOZNmPQ==}
     peerDependencies:
@@ -226,6 +315,13 @@ packages:
       vue-demi: 0.13.11_vue@3.2.47
     dev: false
 
+  /abab/2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+
+  /abbrev/1.1.1:
+    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
+    dev: false
+
   /acorn-walk/8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
@@ -237,6 +333,14 @@ packages:
     hasBin: true
     dev: true
 
+  /agent-base/6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -257,7 +361,6 @@ packages:
 
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: false
 
   /axios/1.3.4:
     resolution: {integrity: sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==}
@@ -269,10 +372,20 @@ packages:
       - debug
     dev: false
 
+  /balanced-match/1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: false
+
   /blueimp-md5/2.19.0:
     resolution: {integrity: sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==}
     dev: true
 
+  /brace-expansion/2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: false
+
   /cac/6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -300,6 +413,9 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       delayed-stream: 1.0.0
+
+  /commander/2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: false
 
   /concordance/5.0.4:
@@ -316,6 +432,27 @@ packages:
       well-known-symbols: 2.0.0
     dev: true
 
+  /config-chain/1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+    dev: false
+
+  /cssstyle/3.0.0:
+    resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
+    engines: {node: '>=14'}
+    dependencies:
+      rrweb-cssom: 0.6.0
+
+  /data-urls/4.0.0:
+    resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
+    engines: {node: '>=14'}
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+
   /date-time/3.1.0:
     resolution: {integrity: sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==}
     engines: {node: '>=6'}
@@ -333,7 +470,9 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
+
+  /decimal.js/10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
 
   /deep-eql/4.1.3:
     resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
@@ -345,8 +484,27 @@ packages:
   /delayed-stream/1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
+
+  /domexception/4.0.0:
+    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
+    engines: {node: '>=12'}
+    dependencies:
+      webidl-conversions: 7.0.0
+
+  /editorconfig/0.15.3:
+    resolution: {integrity: sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+      lru-cache: 4.1.5
+      semver: 5.7.1
+      sigmund: 1.0.1
     dev: false
 
+  /entities/4.4.0:
+    resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
+    engines: {node: '>=0.12'}
+
   /esbuild-android-64/0.15.18:
     resolution: {integrity: sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==}
     engines: {node: '>=12'}
@@ -557,6 +715,11 @@ packages:
       esbuild-windows-arm64: 0.15.18
     dev: true
 
+  /estree-walker/2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: false
+    optional: true
+
   /esutils/2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -607,6 +770,9 @@ packages:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       mime-types: 2.1.35
+
+  /fs.realpath/1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: false
 
   /fsevents/2.3.2:
@@ -625,6 +791,17 @@ packages:
     resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==}
     dev: true
 
+  /glob/8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: false
+
   /graceful-fs/4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: true
@@ -637,17 +814,114 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /html-encoding-sniffer/3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+    dependencies:
+      whatwg-encoding: 2.0.0
+
+  /http-proxy-agent/5.0.0:
+    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
+    engines: {node: '>= 6'}
+    dependencies:
+      '@tootallnate/once': 2.0.0
+      agent-base: 6.0.2
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+
+  /https-proxy-agent/5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+
+  /iconv-lite/0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+
+  /inflight/1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: false
+
+  /inherits/2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: false
+
+  /ini/1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+    dev: false
+
   /is-core-module/2.11.0:
     resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
     dependencies:
       has: 1.0.3
     dev: true
 
+  /is-potential-custom-element-name/1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  /js-beautify/1.14.6:
+    resolution: {integrity: sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 0.15.3
+      glob: 8.1.0
+      nopt: 6.0.0
+    dev: false
+
   /js-string-escape/1.0.1:
     resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==}
     engines: {node: '>= 0.8'}
     dev: true
 
+  /jsdom/22.0.0:
+    resolution: {integrity: sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      abab: 2.0.6
+      cssstyle: 3.0.0
+      data-urls: 4.0.0
+      decimal.js: 10.4.3
+      domexception: 4.0.0
+      form-data: 4.0.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.4
+      parse5: 7.1.2
+      rrweb-cssom: 0.6.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.2
+      w3c-xmlserializer: 4.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+      ws: 8.13.0
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   /jsonc-parser/3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
     dev: true
@@ -671,6 +945,13 @@ packages:
       get-func-name: 2.0.0
     dev: true
 
+  /lru-cache/4.1.5:
+    resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
+    dependencies:
+      pseudomap: 1.0.2
+      yallist: 2.1.2
+    dev: false
+
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -695,13 +976,18 @@ packages:
   /mime-db/1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
-    dev: false
 
   /mime-types/2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
     dependencies:
       mime-db: 1.52.0
+
+  /minimatch/5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
     dev: false
 
   /mlly/1.2.0:
@@ -715,7 +1001,6 @@ packages:
 
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
@@ -723,10 +1008,27 @@ packages:
     hasBin: true
     dev: true
 
+  /nopt/6.0.0:
+    resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      abbrev: 1.1.1
+    dev: false
+
+  /nwsapi/2.2.4:
+    resolution: {integrity: sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g==}
+
   /nzh/1.0.8:
     resolution: {integrity: sha512-fm9qlo0aBJxbi3dt4ix+iqRa95tAWAptwmSNTfUEleCitbTz8D3i7KPu0O2mecnvVn+b/JMb4uJqHOj2yJf3hQ==}
     dev: false
 
+  /once/1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: false
+
   /p-limit/4.0.0:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -734,6 +1036,11 @@ packages:
       yocto-queue: 1.0.0
     dev: true
 
+  /parse5/7.1.2:
+    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+    dependencies:
+      entities: 4.4.0
+
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
@@ -776,14 +1083,35 @@ packages:
       react-is: 17.0.2
     dev: true
 
+  /proto-list/1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+    dev: false
+
   /proxy-from-env/1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
     dev: false
 
+  /pseudomap/1.0.2:
+    resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
+    dev: false
+
+  /psl/1.9.0:
+    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+
+  /punycode/2.3.0:
+    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+    engines: {node: '>=6'}
+
+  /querystringify/2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+
   /react-is/17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
 
+  /requires-port/1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
   /resolve/1.22.1:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
     hasBin: true
@@ -801,6 +1129,23 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rrweb-cssom/0.6.0:
+    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
+
+  /safer-buffer/2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  /saxes/6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+    dependencies:
+      xmlchars: 2.2.0
+
+  /semver/5.7.1:
+    resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
+    hasBin: true
+    dev: false
+
   /semver/7.3.8:
     resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
     engines: {node: '>=10'}
@@ -813,6 +1158,10 @@ packages:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
     dev: true
 
+  /sigmund/1.0.1:
+    resolution: {integrity: sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==}
+    dev: false
+
   /sortablejs/1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
     dev: false
@@ -822,6 +1171,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /source-map/0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+    optional: true
+
   /stackback/0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
@@ -841,6 +1196,9 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /symbol-tree/3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   /time-zone/1.0.0:
     resolution: {integrity: sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==}
     engines: {node: '>=4'}
@@ -860,6 +1218,27 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+    dev: false
+    optional: true
+
+  /tough-cookie/4.1.2:
+    resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.0
+      universalify: 0.2.0
+      url-parse: 1.5.10
+
+  /tr46/4.1.1:
+    resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
+    engines: {node: '>=14'}
+    dependencies:
+      punycode: 2.3.0
+
   /type-detect/4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
@@ -869,6 +1248,16 @@ packages:
     resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}
     dev: true
 
+  /universalify/0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+
+  /url-parse/1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+
   /vite-node/0.31.0_y7rghahg7ddu72pko63vhsxa44:
     resolution: {integrity: sha512-8x1x1LNuPvE2vIvkSB7c1mApX5oqlgsxzHQesYF7l5n1gKrEmrClIiZuOFbFDQcjLsmcWSwwmrWrcGWm9Fxc/g==}
     engines: {node: '>=v14.18.0'}
@@ -925,7 +1314,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitest/0.31.0_sass@1.59.3:
+  /vitest/0.31.0_jsdom@22.0.0+sass@1.59.3:
     resolution: {integrity: sha512-JwWJS9p3GU9GxkG7eBSmr4Q4x4bvVBSswaCFf1PBNHiPx00obfhHRJfgHcnI0ffn+NMlIh9QGvG75FlaIBdKGA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -970,6 +1359,7 @@ packages:
       chai: 4.3.7
       concordance: 5.0.4
       debug: 4.3.4
+      jsdom: 22.0.0
       local-pkg: 0.4.3
       magic-string: 0.30.0
       pathe: 1.1.0
@@ -1023,11 +1413,38 @@ packages:
       vue: registry.npmmirror.com/vue/3.2.47
     dev: false
 
+  /w3c-xmlserializer/4.0.0:
+    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
+    engines: {node: '>=14'}
+    dependencies:
+      xml-name-validator: 4.0.0
+
+  /webidl-conversions/7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
   /well-known-symbols/2.0.0:
     resolution: {integrity: sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==}
     engines: {node: '>=6'}
     dev: true
 
+  /whatwg-encoding/2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+    dependencies:
+      iconv-lite: 0.6.3
+
+  /whatwg-mimetype/3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
+  /whatwg-url/12.0.1:
+    resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      tr46: 4.1.1
+      webidl-conversions: 7.0.0
+
   /why-is-node-running/2.2.2:
     resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==}
     engines: {node: '>=8'}
@@ -1037,10 +1454,37 @@ packages:
       stackback: 0.0.2
     dev: true
 
+  /wrappy/1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: false
+
   /written-number/0.11.1:
     resolution: {integrity: sha512-LhQ68uUnzHH0bwm/QiGA9JwqgadSDOwqB2AIs/LBsrOY6ScqVXKRN2slTCeKAhstDBJ/Of/Yxcjn0pnQmVlmtg==}
     dev: false
 
+  /ws/8.13.0:
+    resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  /xml-name-validator/4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  /xmlchars/2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  /yallist/2.1.2:
+    resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
+    dev: false
+
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
diff --git a/test/logic/data/preo.json b/test/logic/data/preo.json
new file mode 100644
index 0000000..6eef8c1
--- /dev/null
+++ b/test/logic/data/preo.json
@@ -0,0 +1 @@
+{"layoutType":1,"list":[{"type":"inline","columns":["7id0rP5GEg-Ju0cCpb7xk"],"style":{},"id":"53-DkxAI182qxDdLhbxHs","key":"inline_53-DkxAI182qxDdLhbxHs"}],"config":{"isSync":true,"pc":{"size":"default","labelPosition":"left","completeButton":{"text":"提交","color":"","backgroundColor":""}},"mobile":{"labelPosition":"left","completeButton":{"text":"提交","color":"","backgroundColor":""}}},"fields":[{"type":"input","label":"Email","icon":"email","key":"input_7id0rP5GEg-Ju0cCpb7xk","id":"7id0rP5GEg-Ju0cCpb7xk","options":{"clearable":true,"renderType":2,"disabled":false,"showPassword":false,"defaultValue":"","placeholder":"Please enter","labelWidth":100,"isShowLabel":true,"required":false},"style":{"width":{"pc":"100%","mobile":"100%"}}}],"data":{},"logic":{}}
diff --git a/test/logic/dd.test.js b/test/logic/dd.test.js
new file mode 100644
index 0000000..33343c9
--- /dev/null
+++ b/test/logic/dd.test.js
@@ -0,0 +1,40 @@
+import { describe, assert, expect, test, beforeAll, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import ElementPlus from 'element-plus'
+import Vant from 'vant'
+import { erFormPreview } from '@ER/formEditor'
+import preo from './data/preo.json'
+const _mount = (template, data, otherObj) => mount(
+  {
+    components: {
+      erFormPreview
+    },
+    template,
+    data,
+    ...otherObj
+  },
+  {
+    attachTo: 'body',
+    global: {
+      plugins: [
+        ElementPlus,
+        Vant
+      ]
+    }
+  }
+)
+describe('er-form-preview', () => {
+  test('renders a todo', async () => {
+    const wrapper = _mount(`
+    <er-form-preview
+      @listener="handleListener"
+      ref="EReditorRef"/>
+    `)
+    wrapper.findComponent({ ref: 'EReditorRef' }).vm.setData(preo)
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    await flushPromises()
+    console.log(wrapper.html())
+    // expect(wrapper.text()).toBe('Default')
+  })
+})
diff --git a/test/logic/validator/Region.test.js b/test/logic/validator/Region.test.js
index c15fd66..f5f98c9 100644
--- a/test/logic/validator/Region.test.js
+++ b/test/logic/validator/Region.test.js
@@ -1,8 +1,18 @@
 import { describe, assert, expect, test } from 'vitest'
-import { validator } from '@ER/hooks/use-logic'
+import { validator, getAreaType } from '@ER/hooks/use-logic'
 import { areaList } from '@vant/area-data'
 const field = { type: 'region', label: 'Region', icon: 'location', key: 'region_Yqz1snVkubaX2WG8xCEFs', id: 'Yqz1snVkubaX2WG8xCEFs', options: { placeholder: 'Please select', required: false, isShowLabel: true, labelWidth: 100, defaultValue: '', selectType: 1, filterable: true }, style: { width: { pc: '100%', mobile: '100%' } } }
 describe('Region', () => {
+  test.each([
+    { codes: areaList.province_list, expected: 1 },
+    { codes: areaList.city_list, expected: 2 },
+    { codes: areaList.county_list, expected: 3 }
+  ])('getAreaType should return expected for %p', ({ codes, expected }) => {
+    Object.keys(codes).forEach(code => {
+      const result = getAreaType(code)
+      expect(result).toBe(expected)
+    })
+  })
   test('one_of: selectType 1', () => {
     field.options.selectType = 1
     expect(
@@ -519,19 +529,4 @@ describe('Region', () => {
       null,
       field)).toBeTruthy()
   })
-  // test('getAreaType:1', () => {
-  //   Object.keys(areaList.province_list).forEach(code => {
-  //     expect(getAreaType(code)).toBe(1)
-  //   })
-  // })
-  // test('getAreaType:2', () => {
-  //   Object.keys(areaList.city_list).forEach(code => {
-  //     expect(getAreaType(code)).toBe(2)
-  //   })
-  // })
-  // test('getAreaType:3', () => {
-  //   Object.keys(areaList.county_list).forEach(code => {
-  //     expect(getAreaType(code)).toBe(3)
-  //   })
-  // })
 })
diff --git a/vite.config.js b/vite.config.js
index 9c372f8..bd53b4f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -55,8 +55,14 @@ const examplePlugin = () => {
   }
 }
 export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    transformMode: {
+      web: [/\.[jt]sx$/],
+    }
+  },
   base: './',
-  define: { 'process.env.NODE_ENV': '"production"' },
+  // define: { 'process.env.NODE_ENV': process.env.NODE_ENV },
   build: {
     lib: {
       entry: resolve(__dirname, 'packages/formEditor/index.js'),