修复画布没有根元素，与vue出码、预览不一致 (#259)

* feat: 页面输入输出配置，配置内有内容时，按钮替换为展示部分文案内容。

* feat: 方法名修改更加符合语义

* fix: 1. 给画布添加根元素(与出码、预览保持一致)。2. 选中画布相当于选中根节点，右侧面板会出现可以添加属性的节点。3. 可以支持给根节点添加类名，id、ref，并修改样式。 4. 支持给根元素添加事件，循环等

* fix: 意见修复

packages/canvas/src/components/render/RenderMain.js

@@ -376,6 +376,13 @@ export default {
     )
   },
   render() {
+    // 渲染画布增加根节点，与出码和预览保持一致
+    const rootChildrenSchema = {
+      componentName: 'div',
+      props: schema.props,
+      children: schema.children
+    }
+
     return h(
       'tiny-i18n-host',
       {
@@ -384,9 +391,7 @@ export default {
         ref: 'page',
         className: 'design-page'
       },
-      schema.children?.length
-        ? schema.children.map((child) => h(renderer, { schema: child, parent: schema }))
-        : [h(CanvasEmpty)]
+      schema.children?.length ? h(renderer, { schema: rootChildrenSchema, parent: schema }) : [h(CanvasEmpty)]
     )
   }
 }

packages/controller/src/useProperties.js

@@ -12,10 +12,12 @@
 
 import { toRaw, nextTick, shallowReactive, ref } from 'vue'
 import { getNode, setState, updateRect } from '@opentiny/tiny-engine-canvas'
+import { constants } from '@opentiny/tiny-engine-utils'
 import useCanvas from './useCanvas'
 import useResource from './useResource'
 import useTranslate from './useTranslate'
 
+const { COMPONENT_NAME } = constants
 const propsUpdateKey = ref(0)
 
 const otherBaseKey = {
@@ -150,11 +152,18 @@ const properties = shallowReactive({
   parent: null
 })
 
+const isPageOrBlock = (schema) => [COMPONENT_NAME.Block, COMPONENT_NAME.Page].includes(schema?.componentName)
+
 const getProps = (schema, parent) => {
-  // 现在选中的节点和当前节点一样，不需要重新计算
-  if (schema && properties.schema !== schema) {
+  // 1 现在选中的节点和当前节点一样，不需要重新计算, 2 默认进来由于scheme和properities.schema相等，因此判断如果是“页面或者区块”需要进入if判断
+  if (schema && (properties.schema !== schema || isPageOrBlock(schema))) {
     const { props, componentName } = schema
-    const { schema: metaSchema, content, properties } = useResource().getMaterial(componentName)
+    // 若选中的是page或者 blcok，没有对应schema，ComponentName 给 div 设置根节点属性
+    const {
+      schema: metaSchema,
+      content,
+      properties
+    } = useResource().getMaterial(isPageOrBlock(schema) ? 'div' : componentName)
     const schemaProps = properties || metaSchema?.properties || content?.schema?.properties || []
     const propGroups = [...schemaProps]
 
@@ -183,8 +192,14 @@ const setProp = (name, value) => {
   }
 
   // 没有父级，或者不在节点上面，要更新内容。就用setState
-  getNode(properties.schema.id, true).parent || setState(useCanvas().getPageSchema().state)
+  getNode(properties.schema.id, true)?.parent || setState(useCanvas().getPageSchema().state)
   propsUpdateKey.value++
+
+  // 更新根节点props不用updateRect
+  if (!properties.schema.id) {
+    return
+  }
+
   nextTick(updateRect)
 }
 

packages/design-core/src/DesignCanvas.vue

@@ -15,7 +15,14 @@
 
 <script>
 import { ref, onMounted, watch } from 'vue'
-import { CanvasContainer, CanvasFooter, selectNode, getNodePath, updateRect } from '@opentiny/tiny-engine-canvas'
+import {
+  CanvasContainer,
+  CanvasFooter,
+  selectNode,
+  getNodePath,
+  updateRect,
+  getSchema
+} from '@opentiny/tiny-engine-canvas'
 import {
   useProperties,
   useCanvas,
@@ -125,8 +132,11 @@ export default {
       if (type !== 'clickTree') {
         useLayout().closePlugin()
       }
-      useProperties().getProps(node, parent)
-      useCanvas().setCurrentSchema(node)
+
+      const schema = getSchema()
+      // 如果选中的节点是画布，就设置成默认选中最外层schema
+      useProperties().getProps(node || schema, parent)
+      useCanvas().setCurrentSchema(node || schema)
       footData.value = getNodePath(node?.id)
       toolbars.visiblePopover = false
     }