fix(app-preview-importMap): Fix ImportMap Issues, Optimize Popover Trigger, and Improve Variable Binding in Preview

mockServer/src/mock/get/app-center/v1/apps/schema/1.json

@@ -2057,6 +2057,27 @@
         "destructuring": true,
         "version": "2.4.2"
       },
+      {
+        "componentName": "TinyHuichartsLine",
+        "package": "@opentiny/vue-huicharts",
+        "exportName": "TinyHuichartsLine",
+        "destructuring": true,
+        "version": "3.22.0"
+      },
+      {
+        "componentName": "TinyHuichartsHistogram",
+        "package": "@opentiny/vue-huicharts",
+        "exportName": "TinyHuichartsHistogram",
+        "destructuring": true,
+        "version": "3.22.0"
+      },
+      {
+        "componentName": "TinyHuichartsPie",
+        "package": "@opentiny/vue-huicharts",
+        "exportName": "TinyHuichartsPie",
+        "destructuring": true,
+        "version": "3.22.0"
+      },
       {
         "componentName": "PortalHome",
         "main": "common/components/home",

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -87,6 +87,9 @@ export default {
       footData.value = useCanvas().getNodePath(node?.id)
       pageState.currentSchema = {}
       pageState.properties = null
+      // 删除节点后，重置pageState中组件的属性
+      // 后续需要改造
+      useProperties().getProps(null, null)
     }
 
     const isBlock = useCanvas().isBlock
@@ -106,9 +109,9 @@ export default {
           empty: () => '应用下暂无页面，需新建页面后体验画布功能',
           release: (type) => `当前${componentType[type]}未锁定，点击右上角 “锁定” 图标后编辑${componentType[type]}`,
           lock: (type) =>
-            `当前${componentType[type]}被 ${pageInfo?.username || ''} 锁定，如需编辑请先联系他解锁文件，然后再锁定该${
+            `当前${componentType[type]}被 ${pageInfo?.username || ''} 锁定，您可以创建新页面，如需编辑请先联系他解锁${
               componentType[type]
-            }后编辑！`
+            }，然后再锁定该${componentType[type]}后编辑！`
         }
 
         const renderMsg = message[pageStatus.state](pageSchema.componentName)

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

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

packages/canvas/container/src/container.ts

@@ -466,6 +466,34 @@ const setSelectRect = (
   )
 }
 
+const getElementDurationTime = (elementId?: string) => {
+  const element = elementId ? querySelectById(elementId) : getDocument().body
+  const transitionDuration = window.getComputedStyle(element).getPropertyValue('transition-duration')
+  const transitionDelay = window.getComputedStyle(element).getPropertyValue('transition-delay')
+  let delayTime = 0
+  const getMaxMillisecondNumber = (arr: string[]) => {
+    const millisecondNumber = arr.map((item) => {
+      if (item.endsWith('ms')) {
+        return parseFloat(item)
+      } else {
+        return parseFloat(item) * 1000
+      }
+    })
+    return millisecondNumber.length ? Math.max(...millisecondNumber) : 0
+  }
+  if (transitionDuration) {
+    const transitionDurations = transitionDuration.split(',')
+    delayTime += getMaxMillisecondNumber(transitionDurations)
+  }
+
+  if (transitionDelay) {
+    const transitionDelays = transitionDelay.split(',')
+    delayTime += getMaxMillisecondNumber(transitionDelays)
+  }
+
+  return delayTime
+}
+
 export const updateRect = (id?: string) => {
   id = (typeof id === 'string' && id) || getCurrent().schema?.id
   clearHover()
@@ -481,7 +509,9 @@ export const updateRect = (id?: string) => {
   const isBodySelected = !selectState.componentName && selectState.width > 0
 
   if (id || isBodySelected) {
-    setTimeout(() => setSelectRect(id))
+    // 获取元素动画持续时间
+    const waitTime = getElementDurationTime(id)
+    setTimeout(() => setSelectRect(id), waitTime)
   } else {
     clearSelect()
   }
@@ -816,7 +846,6 @@ export const dragMove = (event: DragEvent, isHover: boolean) => {
 // type == clickTree, 为点击大纲; type == loop-id=xxx ,为点击循环数据
 export const selectNode = async (id: string, type?: string, isMultiple = false) => {
   const { node } = useCanvas().getNodeWithParentById(id) || {}
-
   let element = querySelectById(id)
 
   if (element && node) {
@@ -825,7 +854,6 @@ export const selectNode = async (id: string, type?: string, isMultiple = false)
   }
 
   const nodeIsSelected = setSelectRect(id, element, { isMultiple, type, schema: node })
-
   // 执行setSelectRect之后再去判断multiSelectedStates的长度
   if (multiSelectedStates.value.length === 1) {
     const { schema: node, parent, type } = multiSelectedStates.value[0]
@@ -851,6 +879,7 @@ export const selectNode = async (id: string, type?: string, isMultiple = false)
   if (multiSelectedStates.value.length === 1) {
     const { schema: node, parent, type, id } = multiSelectedStates.value[0]
     canvasState.emit('selected', node, parent, type, id)
+
     return node
   } else {
     canvasState.emit('selected')

packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-popover
     :trigger="trigger"
-    :open-delay="1000"
+    :open-delay="500"
     popper-class="toolbar-right-popover"
     append-to-body
     :content="content"

packages/common/js/import-map.json

@@ -17,6 +17,7 @@
     "@opentiny/vue-common": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-common.mjs",
     "@opentiny/vue-locale": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-locale.mjs",
     "@opentiny/vue-renderless/": "${VITE_CDN_DOMAIN}/@opentiny/vue-renderless${versionDelimiter}~3.20${fileDelimiter}/",
+    "@opentiny/vue-huicharts": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.22${fileDelimiter}/dist3/tiny-vue-huicharts.mjs",
     "echarts": "${VITE_CDN_DOMAIN}/echarts${versionDelimiter}5.4.1${fileDelimiter}/dist/echarts.esm.js",
     "@tailwindcss/browser": "${VITE_CDN_DOMAIN}/@tailwindcss/browser${versionDelimiter}^4${fileDelimiter}/dist/index.global.js"
   },

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">
@@ -81,9 +88,18 @@ export default {
       currentAttr: {}
     })
 
+    const attrFormRef = ref()
     const attrs = ref([])
     const properties = ['style']
 
+    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
@@ -144,24 +160,29 @@ export default {
     }
 
     const save = () => {
-      state.visible = false
-      const data = {}
-      let index = -1
+      attrFormRef.value.validate((valid) => {
+        if (!valid) {
+          return
+        }
+        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
-      }
+        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
+        }
 
-      data.text = `${state.formData.key} = '${state.formData.value}'`
-      data.data = { key: state.formData.key, value: state.formData.value }
+        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()
+        attrs.value.splice(index, 1, data)
+        updateSchema()
+      })
     }
 
     const edit = (attr) => {
@@ -187,7 +208,9 @@ export default {
     }
 
     return {
+      attrFormRef,
       state,
+      rules,
       cancel,
       save,
       attrs,
@@ -248,6 +271,11 @@ export default {
     display: grid;
     grid-template-columns: 3fr auto;
 
+    .item-content {
+      word-wrap: break-word;
+      white-space: normal;
+      word-break: break-all;
+    }
     .item-controller {
       display: grid;
       column-gap: 3px;

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

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