From f843d121fab679165c08126926f637f42140209b Mon Sep 17 00:00:00 2001 From: lhuans <145339349+lhuans@users.noreply.github.com> Date: Thu, 25 Jan 2024 00:43:35 -0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=94=BB=E5=B8=83=E6=B2=A1?= =?UTF-8?q?=E6=9C=89=E6=A0=B9=E5=85=83=E7=B4=A0=EF=BC=8C=E4=B8=8Evue?= =?UTF-8?q?=E5=87=BA=E7=A0=81=E3=80=81=E9=A2=84=E8=A7=88=E4=B8=8D=E4=B8=80?= =?UTF-8?q?=E8=87=B4=20(#259)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 页面输入输出配置，配置内有内容时，按钮替换为展示部分文案内容。 * feat: 方法名修改更加符合语义 * fix: 1. 给画布添加根元素(与出码、预览保持一致)。2. 选中画布相当于选中根节点，右侧面板会出现可以添加属性的节点。3. 可以支持给根节点添加类名，id、ref，并修改样式。 4. 支持给根元素添加事件，循环等 * fix: 意见修复 --- .../src/components/render/RenderMain.js | 11 ++++++--- packages/controller/src/useProperties.js | 23 +++++++++++++++---- packages/design-core/src/DesignCanvas.vue | 16 ++++++++++--- 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/packages/canvas/src/components/render/RenderMain.js b/packages/canvas/src/components/render/RenderMain.js index 532821b..922b354 100644 --- a/packages/canvas/src/components/render/RenderMain.js +++ b/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)] ) } } diff --git a/packages/controller/src/useProperties.js b/packages/controller/src/useProperties.js index 81e132a..44181e5 100644 --- a/packages/controller/src/useProperties.js +++ b/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) } diff --git a/packages/design-core/src/DesignCanvas.vue b/packages/design-core/src/DesignCanvas.vue index 21dcb7a..3cafb4d 100644 --- a/packages/design-core/src/DesignCanvas.vue +++ b/packages/design-core/src/DesignCanvas.vue @@ -15,7 +15,14 @@