画布中，fusion的Shell.Navigation在Shell中不显示

hu2013 commented 2 years ago

Describe the bug (required) / 详细描述 bug（必填）

画布中，fusion的Shell.Navigation在Shell中不能正常显示

To Reproduce (required) / 如何复现 bug？（必填，非常重要）

详细复现步骤：

修改lowcode-demo下basic-fusion的assets.json, 在Components下添加fusion的Shell和Shell.Navigation, 在componentList下也加上这两个组件
npm start 启动demo
在浏览器打开demo，并切换到basic-fusion场景
拖拽Shell到画布，并在样式里把高度设置为100 （问题1：Shell中间没有其他容器类似的“拖拽组件或模板到这里”的提示）
拖拽Shell.Navigation到画布，此时Shell.Navigation在画布上显示正常
在画布中，拖拽Shell.Navigation到Shell中（或者，大纲树中，把Shell.Navigation拖拽到Shell节点下）
画布中找不到Shell.Navigation，没有显示在Shell里（问题2：画布中，为什么Shell.Navigation不显示在Shell上）
预览画布，可以看到Shell.Navigation加到Shell里的正常效果

Expected behavior (required) / 预期行为（必填，非常重要）

A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为

第4步：Shell中有包含“拖拽组件或模板到这里”的提示第7步：Shell.Navigation如果拖拽到Shell中，可以在画布中可视化编辑

Screenshots (optional) / bug 截图（可选）

Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题

无

Environments (please complete the following information) (required): / 请提供如下信息（必填）

AliLowCodeEngine version: [e.g. 1.0.0] / 低代码引擎版本 @alilc/lowcode-code-generator@1.0.4 (from lowcode-demo/node_modules/@alilc/lowcode-code-generator/package.json)
AliLowCodeEngineExt version: [e.g. 1.0.0] / 低代码引擎扩展包版本
Browser [e.g. chrome, safari] / 浏览器版本 Edge 106.0.1370.47
materials / plugins / tools / 其他物料 / 插件 / 工具链版本 { "title": "fusion组件库", "package": "@alifd/next", "version": "1.23.0", "urls": [ "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next.min.css", "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next-with-locales.min.js" ], "library": "Next" }, (from lowcode-demo/src/scenarios/basic-fusion/assets.json)

(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)

Additional context (optional) / 更多额外信息（可选）

Any other context of the problem here. / 可以追加更多的额外信息，帮助定位问题

assets.json 中添加的Shell和Shell.Navigation信息

"components": [ { "componentName": "Shell", "title": "Shell", "docUrl": "", "screenshot": "", "npm": { "package": "@alifd/next", "version": "1.23.x", "exportName": "Shell", "main": "", "destructuring": true, "subName": "" }, "props": [ { "name": "className", "propType": "string" }, { "name": "style", "propType": "object" }, { "name": "device", "title": { "label": { "type": "i18n", "zh_CN": "标题", "en_US": "Title" }, "tip": { "type": "i18n", "zh_CN": "属性: shell | 说明: Shell", "en_US": "prop: shell | description: Shell" } }, "propType": { "type": "oneOf", "value": ["phone", "tablet", "desktop"] }, "description": "设备", "defaultValue": "desktop" }, { "name": "type", "title": { "label": { "type": "i18n", "zh_CN": "类型", "en_US": "Type" }, "tip": { "type": "i18n", "zh_CN": "属性: type | 说明: 反馈类型", "en_US": "prop: type | description: message type" } }, "propType": { "type": "oneOf", "value": ["light", "dark", "brand"] }, "description": "主题", "defaultValue": "light" }, { "name": "fixedHeader", "title": { "label": { "type": "i18n", "zh_CN": "是否固定Header", "en_US": "Fix Header" }, "tip": { "type": "i18n", "zh_CN": "属性: fixedHeader | 说明: 是否锁定Header", "en_US": "prop: fixedHeader | description: fixedHeader" } }, "propType": "bool", "description": "是否锁定Header" } ], "configure": { "component": { "isContainer": true } }, "category": "布局" }, { "componentName": "Shell.Navigation", "title": "Navigation", "docUrl": "", "screenshot": "", "npm": { "package": "@alifd/next", "version": "1.23.x", "exportName": "Shell", "main": "", "destructuring": true, "subName": "Navigation" }, "props": [ { "name": "className", "propType": "string" }, { "name": "style", "propType": "object" }, { "name": "direction", "title": { "label": { "type": "i18n", "zh_CN": "类型", "en_US": "direction" }, "tip": { "type": "i18n", "zh_CN": "属性: direction | 说明: 反馈类型", "en_US": "prop: direction | description: direction" } }, "propType": { "type": "oneOf", "value": ["hoz", "ver"] }, "description": "方向", "defaultValue": "hoz" }, { "name": "collapse", "title": { "label": { "type": "i18n", "zh_CN": "折叠", "en_US": "collapse" }, "tip": { "type": "i18n", "zh_CN": "属性: 折叠 | 说明: 是否折叠", "en_US": "prop: collapse | description: collapse" } }, "propType": "bool", "description": "是否折叠" }, { "name": "align", "title": { "label": { "type": "i18n", "zh_CN": "对齐", "en_US": "Align" }, "tip": { "type": "i18n", "zh_CN": "属性: 对齐 | 说明: 对齐方式", "en_US": "prop: Align | description: Align" } }, "propType": { "type": "oneOf", "value": ["left", "right", "center"] }, "description": "对齐", "defaultValue": "right" }, { "name": "fixed", "title": { "label": { "type": "i18n", "zh_CN": "固定", "en_US": "fixed" }, "tip": { "type": "i18n", "zh_CN": "属性: 固定 | 说明: 是否固定", "en_US": "prop: fixed | description: fixed" } }, "propType": "bool", "description": "是否固定" }

],
"configure": {
  "component": {
    "isContainer": true
  }
},
"category": "布局"

} ],

"componentList": [ { "componentName": "Shell", "library": "Next", "title": "Shell", "icon": "", "snippets": [ { "title": "Shell", "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png", "schema": { "componentName": "Shell", "props": { "device": "desktop", "type": "light", "fixedHeader": true } } } ] }, { "componentName": "Shell.Navigation", "library": "Next", "title": "Navigation", "icon": "", "snippets": [ { "title": "Navigation", "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png", "schema": { "componentName": "Shell.Navigation", "props": { "direction": "hoz", "collapse": false, "align": "right", "fixed": false } } } ] } ]

liujuping commented 2 years ago

问题1：Shell中间没有其他容器类似的“拖拽组件或模板到这里”的提示

设置了高度的容器组件就会没有这个提示。

问题2：画布中，为什么Shell.Navigation不显示在Shell上

需要提供一个更方便复现的 DEMO，参考：https://www.yuque.com/lce/doc/yvlxhs

hu2013 commented 2 years ago

问题1：Shell.Navigation也是容器，但是在样式里设置高度后，“拖拽组件或模板到这里”的提示还在问题2：能不能把我提供的assets.json里的配置，放到demo的basic-fusion的assets.json里试一下，或者，给我提供一个没问题的Shell，Shell.Navigation的配置也可以，谢谢！

hu2013 commented 2 years ago

@liujuping 能不能帮我看下这个问题呀

补充一个信息，在画布中把Shell.Navigation拖入Shell中后，控制台会打印以下提示： mobx.esm.js:4251

   [mobx.array] Attempt to read an array index (0) that is out of bounds (0). Please check length first. Out of bound indices will not be tracked by MobX

e @ mobx.esm.js:4251 e @ mobx.esm.js:3961 e @ host.ts:877 Ln @ insertion.tsx:82 In @ insertion.tsx:105 e @ insertion.tsx:131 en @ mobx.esm.js:1334 (匿名) @ mobxreact.esm.js:312 mn @ mobx.esm.js:1953 e @ mobx.esm.js:2545 u @ mobxreact.esm.js:310 Ie @ react-dom.production.min.js:104 rh @ react-dom.production.min.js:103 zj @ react-dom.production.min.js:228 Th @ react-dom.production.min.js:152 tj @ react-dom.production.min.js:152 Te @ react-dom.production.min.js:146 (匿名) @ react-dom.production.min.js:61 unstable_runWithPriority @ react.production.min.js:25 Da @ react-dom.production.min.js:60 Pg @ react-dom.production.min.js:61 ha @ react-dom.production.min.js:60 Qh @ react-dom.production.min.js:147 n @ mobx.esm.js:2692 Qn @ mobx.esm.js:2661 Gn @ mobx.esm.js:2281 e @ mobx.esm.js:508 e @ mobx.esm.js:1458 e @ mobx.esm.js:5390 t @ mobx.esm.js:5947 e @ renderer.ts:508 (匿名) @ leaf.js:61 (匿名) @ control.ts:28 e @ events.js:153 e @ node-children.ts:125 e @ node.ts:340 e @ node-children.ts:213 G @ node.ts:1286 z @ node.ts:1302 (匿名) @ designer.ts:125 e @ events.js:158 e @ dragon.ts:470

[mobx.array] Attempt to read an array index (0) that is out of bounds (0). Please check length first. Out of bound indices will not be tracked by MobX e @ mobx.esm.js:4251 e @ mobx.esm.js:3961 e @ host.ts:1002 (匿名) @ designer.ts:177 e @ events.js:158 e @ active-tracker.ts:23 (匿名) @ designer.ts:137 setTimeout(异步) (匿名) @ designer.ts:137 e @ events.js:158 e @ dragon.ts:470

liujuping commented 2 years ago

可以先通过这个文档自查一下。

https://www.yuque.com/lce/doc/bgodtf

alibaba / lowcode-engine