alibaba / alibaba/lowcode-engine

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

Open
#1,169 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

## **Describe the bug (required)** / **详细描述 bug(必填)**

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

## **To Reproduce (required)** / **如何复现 bug?(必填,非常重要)**
详细复现步骤:

1. 修改lowcode-demo下basic-fusion的assets.json, 在Components下添加fusion的Shell和Shell.Navigation, 在componentList下也加上这两个组件
2. npm start 启动demo
3. 在浏览器打开demo,并切换到basic-fusion场景
4. 拖拽Shell到画布,并在样式里把高度设置为100 (问题1:Shell中间没有其他容器类似的“拖拽组件或模板到这里”的提示)
5. 拖拽Shell.Navigation到画布,此时Shell.Navigation在画布上显示正常
6. 在画布中,拖拽Shell.Navigation到Shell中(或者,大纲树中,把Shell.Navigation拖拽到Shell节点下)
7. 画布中找不到Shell.Navigation,没有显示在Shell里 (问题2:画布中,为什么Shell.Navigation不显示在Shell上)
8. 预览画布,可以看到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](https://img.alicdn.com/imgextra/i1/O1CN0115zonY1IsgbkZ2ir7_!!6000000000949-2-tps-3066-1650.png) / 版本信息可[通过低代码用户手册插件收集](https://img.alicdn.com/imgextra/i1/O1CN0115zonY1IsgbkZ2ir7_!!6000000000949-2-tps-3066-1650.png))

## **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
}
}
}
]
}
]

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the issue in lowcode-demo/src/scenarios/basic-fusion/assets.json with the listed @alifd/next Shell and Shell.Navigation definitions, then run npm start and inspect their behavior on the canvas. Compare the canvas result with the preview after nesting Shell.Navigation under Shell. Done means Shell shows the empty-container prompt and nested Shell.Navigation remains visible and editable on the canvas.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.