alibaba / alibaba/lowcode-engine

antd物料出码效果和预览效果存在较大差异

Open
#1,883 2 comments 0 reactions 1 assignee Assigned to @qingniaotonghua View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

## antd物料,设计态和预览态效果基本一致,但出码后运行差异较大。

1.通过https://github.com/alibaba/lowcode-materials下载物料到本地:

`git clone https://github.com/alibaba/lowcode-materials.git`

2.进入package下面的antd物料
` cd lowcode-materials/packages/antd-lowcode-materials`

3.安装依赖
` npm i`

4.运行dev
`npm run lowcode:dev`

5.打开运行的调试页面,http://loaclhost:3336/
6.拖入表单容器组件:
![image](https://user-images.githubusercontent.com/33279561/232363818-5adc28d2-c2d9-4b1f-a822-d4915255889f.png)
7.预览
![image](https://user-images.githubusercontent.com/33279561/232364647-55f2fa3d-9ba6-4bd8-9182-cb4e004b0d93.png)
8.出码并下载zip包
![image](https://user-images.githubusercontent.com/33279561/232364038-0a2887d4-1e55-46cf-9932-e46490682870.png)
9.打开zip包并解压
10.进入解压后的目录,安装依赖
`yarn install`
11.运行
`npm start`
12.打开发现很多排版错乱,和预览渲染页面差异较大。
![image](https://user-images.githubusercontent.com/33279561/232364732-c6d36c4b-9b28-4967-bc7f-919bcda32479.png)
![image](https://user-images.githubusercontent.com/33279561/232364767-c0fcaac4-75d6-4ded-bf52-910b3bf7bae4.png)
13.如果把物料直接换成转化前的antd组件,则效果正常。
![image](https://user-images.githubusercontent.com/33279561/232365977-c3333583-5f24-45ef-a54f-1a6a88f6b940.png)
![image](https://user-images.githubusercontent.com/33279561/232366066-fdefd380-3042-4650-9f2a-7e8cc3d27a1d.png)
![image](https://user-images.githubusercontent.com/33279561/232366130-a8dbd058-9af7-4a93-b3e2-f09e5cb54a78.png)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.