🐛 [Bug]: 应用发布后，自动生成的页面代码中组件引入路径 有误，为undefined
Closed this issue · 13 comments
Environment
Chrome120.0.6099.216（正式版本） (arm64)
Version
v16.20.2
Version
最新
Link to minimal reproduction
<template>
<div>
<span>TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。</span>
<div></div>
<a>链接</a>
<button>
<span>按钮文案</span>
</button>
<form action="action">
<label for="male">male</label>
<input type="text" />
<br />
<label for="Female">Female</label>
<input type="text" />
</form>
</div>
</template>
<script setup>
import * as vue from 'vue'
import { defineProps, defineEmits } from 'vue'
import { I18nInjectionKey } from 'vue-i18n'
import { a, button, form, input, label } from 'undefined'
const props = defineProps({})
const emit = defineEmits([])
const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
const wrap = lowcodeWrap(props, { emit })
const state = vue.reactive({})
wrap({
stores,
state
})
</script>
<style scoped></style>Step to reproduce
-
首先打开设计器
-
页面管理增加一个页面：
- 往刚刚新增的页面中随便拖入几个组件
-
保存
-
点击应用发布
-
查看发布成功后的代码
-
保存时候的数据结构
{
"id": 1979,
"name": "TestPageTwo",
"app": "918",
"route": "test-page2",
"page_content": {
"state": {},
"methods": {},
"componentName": "Page",
"css": "",
"props": {},
"lifeCycles": {},
"children": [
{
"componentName": "Text",
"props": {
"text": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。"
},
"id": "51261547"
},
{
"componentName": "div",
"props": {},
"id": "53124835"
},
{
"componentName": "a",
"props": {},
"children": "链接",
"id": "15215144"
},
{
"componentName": "button",
"props": {},
"children": [
{
"componentName": "Text",
"props": {
"text": "按钮文案"
},
"id": "1a652426"
}
],
"id": "2c255546"
},
{
"componentName": "form",
"props": {
"action": "action"
},
"children": [
{
"componentName": "label",
"props": {
"for": "male"
},
"children": "male",
"id": "36363333"
},
{
"componentName": "input",
"props": {
"type": "text"
},
"id": "51132534"
},
{
"componentName": "br",
"id": "14a58235"
},
{
"componentName": "label",
"props": {
"for": "Female"
},
"children": "Female",
"id": "1654bb56"
},
{
"componentName": "input",
"props": {
"type": "text"
},
"id": "535b3822"
}
],
"id": "e6323e23"
},
{
"componentName": "h1",
"props": {},
"children": "Heading",
"id": "324c5634"
}
],
"dataSource": {
"list": []
},
"utils": [],
"bridge": [],
"inputs": {
"id": "124"
},
"outputs": [],
"fileName": "TestPageTwo"
},
"created_at": "2024-01-16T01:33:00.000Z",
"updated_at": "2024-01-16T06:31:08.000Z",
"createdBy": null,
"tenant": null,
"isBody": false,
"parentId": "0",
"group": "staticPages",
"depth": 0,
"isPage": true,
"occupier": {
"id": 86,
"username": "开发者",
"email": "developer@lowcode.com",
"resetPasswordToken": "developer",
"blocked": null,
"is_admin": true,
"is_public": null,
"created_at": "2022-05-27T16:50:44.000Z",
"updated_at": "2022-05-27T16:50:44.000Z"
},
"isDefault": false,
"content_blocks": null,
"isHome": false
}What is expected
import { a, button, form, input, label } from 'undefined' // 这里能够正常生成
What is actually happening
import { a, button, form, input, label } from 'undefined'
Any additional comments (optional)
No response
Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: After the application is released, the component introduction path in the automatically generated page code is incorrect and is undefined
Environment
Chrome120.0.6099.216 (official version) (arm64)
Version
v16.20.2
Version
up to date
Link to minimal reproduction
<template>
<div>
<span>TinyEngine front-end visual designer provides customized services for designer developers to build their own exclusive designers online. </span>
<div></div>
<a>Link</a>
<button>
<span>Button copy</span>
</button>
<form action="action">
<label for="male">male</label>
<input type="text" />
<br />
<label for="Female">Female</label>
<input type="text" />
</form>
</div>
</template>
<script setup>
import * as vue from 'vue'
import { defineProps, defineEmits } from 'vue'
import { I18nInjectionKey } from 'vue-i18n'
import { a, button, form, input, label } from 'undefined'
const props = defineProps({})
const emit = defineEmits([])
const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
const wrap = lowcodeWrap(props, { emit })
const state = vue.reactive({})
wrap({
stores,
state
})
</script>
<style scoped></style>Step to reproduce
- First open the designer
-Page management adds a page:
- Drag any few components into the newly added page
-
save
-
Click to publish the application
-
View the code after successful release
-
Data structure when saving
{
"id": 1979,
"name": "TestPageTwo",
"app": "918",
"route": "test-page2",
"page_content": {
"state": {},
"methods": {},
"componentName": "Page",
"css": "",
"props": {},
"lifeCycles": {},
"children": [
{
"componentName": "Text",
"props": {
"text": "TinyEngine front-end visual designer provides customized services for designer developers to build their own exclusive designers online."
},
"id": "51261547"
},
{
"componentName": "div",
"props": {},
"id": "53124835"
},
{
"componentName": "a",
"props": {},
"children": "link",
"id": "15215144"
},
{
"componentName": "button",
"props": {},
"children": [
{
"componentName": "Text",
"props": {
"text": "Button copy"
},
"id": "1a652426"
}
],
"id": "2c255546"
},
{
"componentName": "form",
"props": {
"action": "action"
},
"children": [
{
"componentName": "label",
"props": {
"for": "male"
},
"children": "male",
"id": "36363333"
},
{
"componentName": "input",
"props": {
"type": "text"
},
"id": "51132534"
},
{
"componentName": "br",
"id": "14a58235"
},
{
"componentName": "label",
"props": {
"for": "Female"
},
"children": "Female",
"id": "1654bb56"
},
{
"componentName": "input",
"props": {
"type": "text"
},
"id": "535b3822"
}
],
"id": "e6323e23"
},
{
"componentName": "h1",
"props": {},
"children": "Heading",
"id": "324c5634"
}
],
"dataSource": {
"list": []
},
"utils": [],
"bridge": [],
"inputs": {
"id": "124"
},
"outputs": [],
"fileName": "TestPageTwo"
},
"created_at": "2024-01-16T01:33:00.000Z",
"updated_at": "2024-01-16T06:31:08.000Z",
"createdBy": null,
"tenant": null,
"isBody": false,
"parentId": "0",
"group": "staticPages",
"depth": 0,
"isPage": true,
"occupier": {
"id": 86,
"username": "Developer",
"email": "developer@lowcode.com",
"resetPasswordToken": "developer",
"blocked": null,
"is_admin": true,
"is_public": null,
"created_at": "2022-05-27T16:50:44.000Z",
"updated_at": "2022-05-27T16:50:44.000Z"
},
"isDefault": false,
"content_blocks": null,
"isHome": false
}What is expected
import { a, button, form, input, label } from 'undefined' // This can be generated normally
What is actually happening
import { a, button, form, input, label } from 'undefined'
Any additional comments (optional)
No response
而且明明我是从左侧组件区拖入的组件，按理说应该是@opentiny/vue中的组件，目前看来这个里面没有识别到是组件库中的组件，就是html原生的元素
Bot detected the issue body's language is not English, translate it automatically.
And obviously I dragged the component from the component area on the left. It should be a component in @opentiny/vue. At present, it seems that it is not recognized as a component in the component library, which is a native HTML element.
@CareyYangyy 使用的是默认的物料吗，有修改物料吗
Bot detected the issue body's language is not English, translate it automatically.
@CareyYangyy Are you using the default material? Have you modified the material?
@CareyYangyy 在html分类下使用的是html原生物料组件，麻烦提供下物料资产包内容：packages\design-core\public\mock\bundle.json
Bot detected the issue body's language is not English, translate it automatically.
@CareyYangyy uses html native material components under the html category. Please provide the content of the material asset package: packages\design-core\public\mock\bundle.json
@CareyYangyy 目前推测是你连接的数据库中没有原生组件数据，查看下组件表user_component中以下部分数据是否正常。
如果没有的话，参考物料同步方案将组件数据同步到数据库
补充上面一条，如果没有启动后端服务，仅启动前端mock，查看下mockServer\src\services\appinfo.json中materialHistory.components是否包含input、a、form这些原生标签
@yaoyun8 使用的是默认物料，packages\design-core\public\mock\bundle.json内容如下：完整的太长了无法提交，已经删减为html 部分
{
"data": {
"framework": "Vue",
"materials": {
"components": [],
"blocks": [],
"snippets": [
{
"group": "html",
"children": [
{
"name": {
"zh_CN": "链接"
},
"icon": "link",
"screenshot": "",
"snippetName": "a",
"schema": {
"componentName": "a",
"children": "链接"
}
},
{
"name": {
"zh_CN": "按钮"
},
"icon": "button",
"screenshot": "",
"snippetName": "button",
"schema": {
"componentName": "button",
"props": {},
"children": [
{
"componentName": "Text",
"props": {
"text": "按钮文案"
}
}
]
}
},
{
"name": {
"zh_CN": "表单"
},
"icon": "form",
"screenshot": "",
"snippetName": "form",
"schema": {
"componentName": "form",
"props": {
"action": "action"
},
"children": [
{
"componentName": "label",
"props": {
"for": "male"
},
"children": "male"
},
{
"componentName": "input",
"props": {
"type": "text"
}
},
{
"componentName": "br"
},
{
"componentName": "label",
"props": {
"for": "Female"
},
"children": "Female"
},
{
"componentName": "input",
"props": {
"type": "text"
}
}
]
}
},
{
"name": {
"zh_CN": "标题"
},
"icon": "h16",
"screenshot": "",
"snippetName": "h1",
"schema": {
"componentName": "h1",
"props": {},
"children": "Heading"
}
},
{
"name": {
"zh_CN": "图片"
},
"icon": "Image",
"screenshot": "",
"snippetName": "img",
"schema": {
"componentName": "img",
"props": {
"src": "img/webNova.jpg",
"width": "200",
"height": "100"
}
}
},
{
"name": {
"zh_CN": "输入框"
},
"icon": "input",
"screenshot": "",
"snippetName": "input",
"schema": {
"componentName": "input",
"props": {
"type": "text",
"placeholder": "请输入"
}
}
},
{
"name": {
"zh_CN": "段落"
},
"icon": "paragraph",
"screenshot": "",
"snippetName": "p",
"schema": {
"componentName": "p",
"children": "TinyEngine 前端可视化设计器致力于通过友好的用户交互提升业务应用的开发效率。"
}
},
{
"name": {
"zh_CN": "表格"
},
"icon": "table",
"screenshot": "",
"snippetName": "table",
"schema": {
"componentName": "table",
"props": {
"border": "1"
},
"children": [
{
"componentName": "tr",
"children": [
{
"componentName": "td",
"children": "Month"
},
{
"componentName": "td",
"children": "Savings"
}
]
},
{
"componentName": "tr",
"children": [
{
"componentName": "td",
"children": "January"
},
{
"componentName": "td",
"children": "100"
}
]
}
]
}
},
{
"name": {
"zh_CN": "视频"
},
"icon": "video",
"screenshot": "",
"snippetName": "video",
"schema": {
"componentName": "video",
"props": {
"src": "img/webNova.jpg",
"width": "200",
"height": "100",
"style": "border:1px solid #ccc"
}
}
}
]
}
]
}
}
}
组件表user_component中内容如下：确实有undefined， 但是我已经执行过pnpm build:plugin，pnpm build:alpha or build:prod 来同步物料，同步完就是这样的
Bot detected the issue body's language is not English, translate it automatically.
@yaoyun8 is using the default materials. The contents of packages\design-core\public\mock\bundle.json are as follows: The complete version is too long to submit and has been deleted into the html part.
{
"data": {
"framework": "Vue",
"materials": {
"components": [],
"blocks": [],
"snippets": [
{
"group": "html",
"children": [
{
"name": {
"zh_CN": "Link"
},
"icon": "link",
"screenshot": "",
"snippetName": "a",
"schema": {
"componentName": "a",
"children": "link"
}
},
{
"name": {
"zh_CN": "Button"
},
"icon": "button",
"screenshot": "",
"snippetName": "button",
"schema": {
"componentName": "button",
"props": {},
"children": [
{
"componentName": "Text",
"props": {
"text": "Button copy"
}
}
]
}
},
{
"name": {
"zh_CN": "Form"
},
"icon": "form",
"screenshot": "",
"snippetName": "form",
"schema": {
"componentName": "form",
"props": {
"action": "action"
},
"children": [
{
"componentName": "label",
"props": {
"for": "male"
},
"children": "male"
},
{
"componentName": "input",
"props": {
"type": "text"
}
},
{
"componentName": "br"
},
{
"componentName": "label",
"props": {
"for": "Female"
},
"children": "Female"
},
{
"componentName": "input",
"props": {
"type": "text"
}
}
]
}
},
{
"name": {
"zh_CN": "Title"
},
"icon": "h16",
"screenshot": "",
"snippetName": "h1",
"schema": {
"componentName": "h1",
"props": {},
"children": "Heading"
}
},
{
"name": {
"zh_CN": "Picture"
},
"icon": "Image",
"screenshot": "",
"snippetName": "img",
"schema": {
"componentName": "img",
"props": {
"src": "img/webNova.jpg",
"width": "200",
"height": "100"
}
}
},
{
"name": {
"zh_CN": "Input box"
},
"icon": "input",
"screenshot": "",
"snippetName": "input",
"schema": {
"componentName": "input",
"props": {
"type": "text",
"placeholder": "Please enter"
}
}
},
{
"name": {
"zh_CN": "paragraph"
},
"icon": "paragraph",
"screenshot": "",
"snippetName": "p",
"schema": {
"componentName": "p",
"children": "TinyEngine front-end visual designer is committed to improving the development efficiency of business applications through friendly user interaction."
}
},
{
"name": {
"zh_CN": "Table"
},
"icon": "table",
"screenshot": "",
"snippetName": "table",
"schema": {
"componentName": "table",
"props": {
"border": "1"
},
"children": [
{
"componentName": "tr",
"children": [
{
"componentName": "td",
"children": "Month"
},
{
"componentName": "td",
"children": "Savings"
}
]
},
{
"componentName": "tr",
"children": [
{
"componentName": "td",
"children": "January"
},
{
"componentName": "td",
"children": "100"
}
]
}
]
}
},
{
"name": {
"zh_CN": "video"
},
"icon": "video",
"screenshot": "",
"snippetName": "video",
"schema": {
"componentName": "video",
"props": {
"src": "img/webNova.jpg",
"width": "200",
"height": "100",
"style": "border:1px solid #ccc"
}
}
}
]
}
]
}
}
}
The content in the component table user_component is as follows: There is indeed undefined, but I have executed pnpm build:plugin, pnpm build:alpha or build:prod to synchronize the materials. This is what it looks like after synchronization.
@CareyYangyy 数据没有问题那就要调试了，可以在webservice的schema2code接口里断点调试一下，主要观察componentsMap的数据是否有异常
Bot detected the issue body's language is not English, translate it automatically.
@CareyYangyy If there is no problem with the data, then you need to debug it. You can debug it with breakpoints in the schema2code interface of the webservice. Mainly observe whether there are any abnormalities in the data of componentsMap.