fix(bugs): fix canvas component border & switch style & add validate & tree plugin display sync & bind variable confirm disabled

Author: betterdancing

packages/canvas/container/src/components/CanvasAction.vue

@@ -251,7 +251,10 @@ export default {
     }
 
     const hide = () => {
-      getRenderer().setCondition(getCurrent().schema?.id, false)
+      if (getCurrent().schema?.id) {
+        getRenderer().setCondition(getCurrent().schema.id, false)
+        useCanvas().pageState.nodesStatus[getCurrent().schema.id] = false
+      }
       updateRect()
     }
 

packages/canvas/container/src/container.ts

@@ -481,7 +481,18 @@ export const updateRect = (id?: string) => {
   const isBodySelected = !selectState.componentName && selectState.width > 0
 
   if (id || isBodySelected) {
-    setTimeout(() => setSelectRect(id))
+    const element = querySelectById(id) || getDocument().body
+    const duration = window.getComputedStyle(element).getPropertyValue('transition-duration')
+    let waitTime = 300
+    if (duration) {
+      const unit = duration.slice(-2)
+      if (unit === 'ms') {
+        waitTime = parseFloat(duration)
+      } else {
+        waitTime = parseFloat(duration) * 1000
+      }
+    }
+    setTimeout(() => setSelectRect(id), waitTime)
   } else {
     clearSelect()
   }

packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="attr-header">
-    <span class="header-title">自定义属性</span>
+    <span class="header-title">原生属性</span>
     <tiny-popover
       v-model="state.visible"
       placement="bottom"
@@ -11,11 +11,18 @@
     >
       <div class="attr-form">
         <icon-close class="icon-close" @click="closePopover"></icon-close>
-        <tiny-form label-position="left" label-width="53px">
-          <tiny-form-item label="name">
+        <tiny-form
+          ref="attrFormRef"
+          :model="state.formData"
+          :rules="rules"
+          validate-type="text"
+          label-position="left"
+          label-width="53px"
+        >
+          <tiny-form-item label="name" prop="key">
             <tiny-input v-model="state.formData.key"></tiny-input>
           </tiny-form-item>
-          <tiny-form-item label="value">
+          <tiny-form-item label="value" prop="value">
             <tiny-input v-model="state.formData.value"></tiny-input>
           </tiny-form-item>
           <div class="footer">
@@ -83,6 +90,16 @@ export default {
     const attrs = ref([])
     const properties = ['style']
 
+    const attrFormRef = ref()
+
+    const rules = {
+      key: [
+        { required: true, message: '名称必填', trigger: 'blur' },
+        { max: 20, message: '长度不大于20', trigger: 'change' }
+      ],
+      value: [{ max: 200, message: '长度不大于200', trigger: 'change' }]
+    }
+
     watchEffect(() => {
       if (!useProperties().getSchema()?.props) {
         return
@@ -143,24 +160,29 @@ export default {
     }
 
     const save = () => {
-      state.visible = false
-      const data = {}
-      let index = -1
-
-      if (state.currentAttr.id) {
-        index = attrs.value.findIndex((item) => item.id === state.currentAttr.id)
-        data.id = state.currentAttr.id
-        state.currentAttr = {}
-      } else {
-        data.id = utils.guid()
-        index = attrs.value.length
-      }
+      attrFormRef.value.validate((valid) => {
+        if (!valid) {
+          return
+        }
+        state.visible = false
+        const data = {}
+        let index = -1
 
-      data.text = `${state.formData.key} = '${state.formData.value}'`
-      data.data = { key: state.formData.key, value: state.formData.value }
+        if (state.currentAttr.id) {
+          index = attrs.value.findIndex((item) => item.id === state.currentAttr.id)
+          data.id = state.currentAttr.id
+          state.currentAttr = {}
+        } else {
+          data.id = utils.guid()
+          index = attrs.value.length
+        }
 
-      attrs.value.splice(index, 1, data)
-      updateSchema()
+        data.text = `${state.formData.key} = '${state.formData.value}'`
+        data.data = { key: state.formData.key, value: state.formData.value }
+
+        attrs.value.splice(index, 1, data)
+        updateSchema()
+      })
     }
 
     const edit = (attr) => {
@@ -186,7 +208,9 @@ export default {
     }
 
     return {
+      attrFormRef,
       state,
+      rules,
       cancel,
       save,
       attrs,

packages/configurator/src/slot-configurator/SlotConfigurator.vue

@@ -185,7 +185,7 @@ export default {
 .e__switch-core::after {
   content: '';
   position: absolute;
-  top: 1px;
+  top: 2px;
   left: 1px;
   border-radius: 100%;
   transition: all 0.3s;

packages/configurator/src/variable-configurator/VariableConfigurator.vue

@@ -70,6 +70,7 @@
                 :value="state.variable"
                 :options="editorOptions"
                 @editorDidMount="editorDidMount"
+                @change="editorChange"
               ></monaco-editor>
               <div v-if="isDataSource" class="datasource-poll-wrap">
                 <tiny-tooltip
@@ -112,7 +113,7 @@
         <tiny-button type="danger" plain @click="remove">移除绑定</tiny-button>
         <div class="right">
           <tiny-button @click="cancel">取 消</tiny-button>
-          <tiny-button type="info" @click="confirm">确 定</tiny-button>
+          <tiny-button type="info" :disabled="confirmDisabled" @click="confirm">确 定</tiny-button>
         </div>
       </div>
     </template>
@@ -259,6 +260,8 @@ export default {
 
     const isDataSource = computed(() => state.active === CONSTANTS.DATASOUCE)
 
+    const confirmDisabled = computed(() => !state.variable)
+
     // 每次弹窗打开时都记录下绑定变量的旧值，用来判断保存按钮状态
     watch(
       () => state.isVisible,
@@ -270,6 +273,10 @@ export default {
       }
     )
 
+    const editorChange = (value) => {
+      state.variable = value
+    }
+
     const bindKey = computed(() => props.modelValue?.value?.replace?.('this.state.', '') || '')
 
     const editorOptions = {
@@ -542,7 +549,9 @@ export default {
     }
 
     return {
+      confirmDisabled,
       editorDidMount,
+      editorChange,
       editorOptions,
       variableClick,
       remove,

packages/plugins/tree/src/Main.vue

@@ -96,7 +96,6 @@ export default {
       const translateChild = (data) => {
         data.forEach((item) => {
           item.show = pageState.nodesStatus[item.id] !== false
-          item.showEye = !item.show
           const child = item.children
           if (Array.isArray(child)) {
             translateChild(item.children)
@@ -151,8 +150,8 @@ export default {
     }
 
     const showNode = (data) => {
-      data.show = !data.show
-      pageState.nodesStatus[data.id] = data.show
+      pageState.nodesStatus[data.id] = !(pageState.nodesStatus[data.id] !== false)
+      data.show = pageState.nodesStatus[data.id]
 
       const { getRenderer, clearSelect } = useCanvas().canvasApi.value