🐛 [Bug]: 预览状态下 Element-plus 第三方组件渲染有问题

Cynwell commented 10 months ago

Environment

win11, Command Prompt

Version

v20.10.0

Version

`-- (empty)

Link to minimal reproduction

按着官方教程：https://opentiny.design/tiny-engine#/help-center/course/backend/51

tiny-engine 的执行记录：https://pastebin.com/kwfFS2aP

tiny-engine-webservice 的执行记录：https://pastebin.com/1SfNTDG5

中间有改动文件 (root)/tiny-engine/packages/design-core/vite.config.js, 将 Line 15 const origin = 'http://localhost:9090/' 改成 const origin = 'http://localhost:7011/'.

先安装并运行 tiny-engine-webservice, 之后再安装 tiny-engine 文件, 并运行。
在 tiny-engine 浏览器的界面设计器里拖曳 element-plus 组件到页面中间，然后储存，并且预览
新增的 Element-plus 无法正确渲染

Step to reproduce

页面 Schema:

{
  "state": {
    "dataDisk": [
      1,
      2,
      3
    ]
  },
  "methods": {},
  "componentName": "Page",
  "css": "body {\r\n  background-color:#eef0f5 ;\r\n  margin-bottom: 80px;\r\n}",
  "props": {},
  "children": [
    {
      "componentName": "div",
      "props": {
        "style": "padding-bottom: 10px; padding-top: 10px;"
      },
      "id": "2b2cabf0",
      "children": [
        {
          "componentName": "TinyTimeLine",
          "props": {
            "active": "2",
            "data": [
              {
                "name": "基础配置"
              },
              {
                "name": "网络配置"
              },
              {
                "name": "高级配置"
              },
              {
                "name": "确认配置"
              }
            ],
            "horizontal": true,
            "style": "border-radius: 0px;"
          },
          "id": "dd764b17"
        }
      ]
    },
    {
      "componentName": "div",
      "props": {
        "style": "border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"
      },
      "id": "30c94cc8",
      "children": [
        {
          "componentName": "TinyForm",
          "props": {
            "labelWidth": "80px",
            "labelPosition": "top",
            "inline": false,
            "label-position": "left ",
            "label-width": "150px",
            "style": "border-radius: 0px;"
          },
          "children": [
            {
              "componentName": "TinyFormItem",
              "props": {
                "label": "计费模式"
              },
              "children": [
                {
                  "componentName": "TinyButtonGroup",
                  "props": {
                    "data": [
                      {
                        "text": "包年/包月",
                        "value": "1"
                      },
                      {
                        "text": "按需计费",
                        "value": "2"
                      }
                    ],
                    "modelValue": "1"
                  },
                  "id": "a8d84361"
                },
                {
                  "componentName": "ElInput",
                  "props": {},
                  "id": "11161632"
                },
                {
                  "componentName": "ElButton",
                  "props": {},
                  "children": [
                    {
                      "componentName": "Text",
                      "props": {
                        "text": "按钮文本"
                      },
                      "id": "44442125"
                    }
                  ],
                  "id": "34544961"
                },
                {
                  "componentName": "ElForm",
                  "props": {},
                  "children": [
                    {
                      "componentName": "ElFormItem",
                      "props": {
                        "label": "账号",
                        "prop": "account"
                      },
                      "children": [
                        {
                          "componentName": "ElInput",
                          "props": {
                            "modelValue": "",
                            "placeholder": "请输入账号"
                          },
                          "id": "25324444"
                        }
                      ],
                      "id": "52255c44"
                    },
                    {
                      "componentName": "ElFormItem",
                      "props": {
                        "label": "密码",
                        "prop": "password"
                      },
                      "children": [
                        {
                          "componentName": "ElInput",
                          "props": {
                            "modelValue": "",
                            "placeholder": "请输入密码",
                            "type": "password"
                          },
                          "id": "63536f55"
                        }
                      ],
                      "id": "22495446"
                    },
                    {
                      "componentName": "ElFormItem",
                      "props": {},
                      "children": [
                        {
                          "componentName": "ElButton",
                          "props": {
                            "type": "primary",
                            "style": "margin-right: 10px"
                          },
                          "children": [
                            {
                              "componentName": "Text",
                              "props": {
                                "text": "提交"
                              },
                              "id": "2233532b"
                            }
                          ],
                          "id": "14d31545"
                        },
                        {
                          "componentName": "ElTable",
                          "props": {
                            "data": [
                              {
                                "date": "2016-05-03",
                                "name": "Tom",
                                "address": "No. 189, Grove St, Los Angeles"
                              },
                              {
                                "date": "2016-05-02",
                                "name": "Tom",
                                "address": "No. 189, Grove St, Los Angeles"
                              },
                              {
                                "date": "2016-05-04",
                                "name": "Tom",
                                "address": "No. 189, Grove St, Los Angeles"
                              },
                              {
                                "date": "2016-05-01",
                                "name": "Tom",
                                "address": "No. 189, Grove St, Los Angeles"
                              }
                            ],
                            "columns": [
                              {
                                "type": "index"
                              },
                              {
                                "label": "Date",
                                "prop": "date"
                              },
                              {
                                "label": "Name",
                                "prop": "name"
                              },
                              {
                                "label": "Address",
                                "prop": "address"
                              }
                            ]
                          },
                          "id": "32361656",
                          "children": [
                            {
                              "componentName": "ElTableColumn",
                              "props": {
                                "type": "index"
                              },
                              "id": "62256434"
                            },
                            {
                              "componentName": "ElTableColumn",
                              "props": {
                                "label": "Date",
                                "prop": "date"
                              },
                              "id": "6c593316"
                            },
                            {
                              "componentName": "ElTableColumn",
                              "props": {
                                "label": "Name",
                                "prop": "name"
                              },
                              "id": "a6642d63"
                            },
                            {
                              "componentName": "ElTableColumn",
                              "props": {
                                "label": "Address",
                                "prop": "address"
                              },
                              "id": "23353323"
                            }
                          ]
                        },
                        {
                          "componentName": "ElButton",
                          "props": {
                            "type": "primary"
                          },
                          "children": [
                            {
                              "componentName": "Text",
                              "props": {
                                "text": "重置"
                              },
                              "id": "434a5525"
                            }
                          ],
                          "id": "42444951"
                        }
                      ],
                      "id": "43a9c4c5"
                    }
                  ],
                  "id": "51382328"
                }
              ],
              "id": "9f39f3e7"
            },
            {
              "componentName": "TinyFormItem",
              "props": {
                "label": "区域"
              },
              "children": [
                {
                  "componentName": "TinyButtonGroup",
                  "props": {
                    "data": [
                      {
                        "text": "乌兰察布二零一",
                        "value": "1"
                      }
                    ],
                    "modelValue": "1",
                    "style": "border-radius: 0px; margin-right: 10px;"
                  },
                  "id": "c97ccd99"
                },
                {
                  "componentName": "Text",
                  "props": {
                    "text": "温馨提示：页面左上角切换区域",
                    "style": "background-color: [object Event]; color: #8a8e99; font-size: 12px;"
                  },
                  "id": "20923497"
                },
                {
                  "componentName": "Text",
                  "props": {
                    "text": "不同区域的云服务产品之间内网互不相通；请就近选择靠近您业务的区域，可减少网络时延，提高访问速度",
                    "style": "display: block; color: #8a8e99; border-radius: 0px; font-size: 12px;"
                  },
                  "id": "54780a26"
                }
              ],
              "id": "4966384d"
            },
            {
              "componentName": "TinyFormItem",
              "props": {
                "label": "可用区",
                "style": "border-radius: 0px;"
              },
              "children": [
                {
                  "componentName": "TinyButtonGroup",
                  "props": {
                    "data": [
                      {
                        "text": "可用区1",
                        "value": "1"
                      },
                      {
                        "text": "可用区2",
                        "value": "2"
                      },
                      {
                        "text": "可用区3",
                        "value": "3"
                      }
                    ],
                    "modelValue": "1"
                  },
                  "id": "6184481b"
                }
              ],
              "id": "690837bf"
            }
          ],
          "id": "b6a425d4"
        }
      ]
    },
    {
      "componentName": "div",
      "props": {
        "style": "border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"
      },
      "children": [
        {
          "componentName": "TinyForm",
          "props": {
            "labelWidth": "80px",
            "labelPosition": "top",
            "inline": false,
            "label-position": "left ",
            "label-width": "150px",
            "style": "border-radius: 0px;"
          },
          "children": [
            {
              "componentName": "TinyFormItem",
              "props": {
                "label": "CPU架构"
              },
              "children": [
                {
                  "componentName": "TinyButtonGroup",
                  "props": {
                    "data": [
                      {
                        "text": "x86计算",
                        "value": "1"
                      },
                      {
                        "text": "鲲鹏计算",
                        "value": "2"
                      }
                    ],
                    "modelValue": "1"
                  },
                  "id": "7d33ced7"
                }
              ],
              "id": "05ed5a79"
            },
            {
              "componentName": "TinyFormItem",
              "props": {
                "label": "区域"
              },
              "children": [
                {
                  "componentName": "div",
                  "props": {
                    "style": "display: flex; justify-content: flex-start; align-items: center;"
                  },
                  "id": "606edf78",
                  "children": [
                    {
                      "componentName": "div",
                      "props": {
                        "style": "display: flex; align-items: center; margin-right: 10px;"
                      },
                      "id": "f3f98246",
                      "children": [
                        {
                          "componentName": "Text",
                          "props": {
                            "text": "vCPUs",
                            "style": "width: 80px;"
                          },
                          "id": "c287437e"
                        },
                        {
                          "componentName": "TinySelect",
                          "props": {
                            "modelValue": "",
                            "placeholder": "请选择",
                            "options": [
                              {
                                "value": "1",
                                "label": "黄金糕"
                              },
                              {
                                "value": "2",
                                "label": "双皮奶"
                              }
                            ]
                          },
                          "id": "4c43286b"
                        }
                      ]
                    },
                    {
                      "componentName": "div",
                      "props": {
                        "style": "display: flex; align-items: center; margin-right: 10px;"
                      },
                      "children": [
                        {
                          "componentName": "Text",
                          "props": {
                            "text": "内存",
                            "style": "width: 80px; border-radius: 0px;"
                          },
                          "id": "38b8fa1f"
                        },
                        {
                          "componentName": "TinySelect",
                          "props": {
                            "modelValue": "",
                            "placeholder": "请选择",
                            "options": [
                              {
                                "value": "1",
                                "label": "黄金糕"
                              },
                              {
                                "value": "2",
                                "label": "双皮奶"
                              }
                            ]
                          },
                          "id": "cd33328e"
                        }
                      ],
                      "id": "2b2c678f"
                    },
                    {
                      "componentName": "div",
                      "props": {
                        "style": "display: flex; align-items: center;"
                      },
                      "children": [
                        {
                          "componentName": "Text",
                          "props": {
                            "text": "规格名称",
                            "style": "width: 80px;"
                          },
                          "id": "d3eb6352"
                        },
                        {
                          "componentName": "TinySearch",
                          "props": {
                            "modelValue": "",
                            "placeholder": "输入关键词"
                          },
                          "id": "21cb9282"
                        }
                      ],
                      "id": "b8e0f35c"
                    }
                  ]
                },
                {
                  "componentName": "div",
                  "props": {
                    "style": "border-radius: 0px;"
                  },
                  "id": "5000c83e",
                  "children": [
                    {
                      "componentName": "TinyButtonGroup",
                      "props": {
                        "data": [
                          {
                            "text": "通用计算型",
                            "value": "1"
                          },
                          {
                            "text": "通用计算增强型",
                            "value": "2"
                          },
                          {
                            "text": "内存优化型",
                            "value": "3"
                          },
                          {
                            "text": "内存优化型",
                            "value": "4"
                          },
                          {
                            "text": "磁盘增强型",
                            "value": "5"
                          },
                          {
                            "text": "超高I/O型",
                            "value": "6"
                          },
                          {
                            "text": "GPU加速型",
                            "value": "7"
                          }
                        ],
                        "modelValue": "1",
                        "style": "border-radius: 0px; margin-top: 12px;"
                      },
                      "id": "b8724703"
                    },
                    {
                      "componentName": "TinyGrid",
                      "props": {
                        "editConfig": {
                          "trigger": "click",
                          "mode": "cell",
                          "showStatus": true
                        },
                        "columns": [
                          {
                            "type": "radio",
                            "width": 60
                          },
                          {
                            "field": "employees",
                            "title": "规格名称"
                          },
                          {
                            "field": "created_date",
                            "title": "vCPUs | 内存(GiB)",
                            "sortable": true
                          },
                          {
                            "field": "city",
                            "title": "CPU",
                            "sortable": true
                          },
                          {
                            "title": "基准 / 最大带宽\t",
                            "sortable": true
                          },
                          {
                            "title": "内网收发包",
                            "sortable": true
                          }
                        ],
                        "data": [
                          {
                            "id": "1",
                            "name": "GFD科技有限公司",
                            "city": "福州",
                            "employees": 800,
                            "created_date": "2014-04-30 00:56:00",
                            "boole": false
                          },
                          {
                            "id": "2",
                            "name": "WWW科技有限公司",
                            "city": "深圳",
                            "employees": 300,
                            "created_date": "2016-07-08 12:36:22",
                            "boole": true
                          }
                        ],
                        "style": "margin-top: 12px; border-radius: 0px;",
                        "auto-resize": true
                      },
                      "id": "77701c25"
                    },
                    {
                      "componentName": "div",
                      "props": {
                        "style": "margin-top: 12px; border-radius: 0px;"
                      },
                      "id": "3339838b",
                      "children": [
                        {
                          "componentName": "Text",
                          "props": {
                            "text": "当前规格",
                            "style": "width: 150px; display: inline-block;"
                          },
                          "id": "203b012b"
                        },
                        {
                          "componentName": "Text",
                          "props": {
                            "text": "通用计算型 | Si2.large.2 | 2vCPUs | 4 GiB",
                            "style": "font-weight: 700;"
                          },
                          "id": "87723f52"
                        }
                      ]
                    }
                  ]
                }
              ],
              "id": "657fb2fc"
            }
          ],
          "id": "d19b15cf"
        }
      ],
      "id": "9991228b"
    },
    {
      "componentName": "div",
      "props": {
        "style": "border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"
      },
      "children": [
        {
          "componentName": "TinyForm",
          "props": {
            "labelWidth": "80px",
            "labelPosition": "top",
            "inline": false,
            "label-position": "left ",
            "label-width": "150px",
            "style": "border-radius: 0px;"
          },
          "children": [
            {
              "componentName": "TinyFormItem",
              "props": {
                "label": "镜像",
                "style": "border-radius: 0px;"
              },
              "children": [
                {
                  "componentName": "TinyButtonGroup",
                  "props": {
                    "data": [
                      {
                        "text": "公共镜像",
                        "value": "1"
                      },
                      {
                        "text": "私有镜像",
                        "value": "2"
                      },
                      {
                        "text": "共享镜像",
                        "value": "3"
                      }
                    ],
                    "modelValue": "1"
                  },
                  "id": "922b14cb"
                },
                {
                  "componentName": "div",
                  "props": {
                    "style": "display: flex; margin-top: 12px; border-radius: 0px;"
                  },
                  "id": "6b679524",
                  "children": [
                    {
                      "componentName": "TinySelect",
                      "props": {
                        "modelValue": "",
                        "placeholder": "请选择",
                        "options": [
                          {
                            "value": "1",
                            "label": "黄金糕"
                          },
                          {
                            "value": "2",
                            "label": "双皮奶"
                          }
                        ],
                        "style": "width: 170px; margin-right: 10px;"
                      },
                      "id": "4851fff7"
                    },
                    {
                      "componentName": "TinySelect",
                      "props": {
                        "modelValue": "",
                        "placeholder": "请选择",
                        "options": [
                          {
                            "value": "1",
                            "label": "黄金糕"
                          },
                          {
                            "value": "2",
                            "label": "双皮奶"
                          }
                        ],
                        "style": "width: 340px;"
                      },
                      "id": "a7183eb7"
                    }
                  ]
                },
                {
                  "componentName": "div",
                  "props": {
                    "style": "margin-top: 12px;"
                  },
                  "id": "57aee314",
                  "children": [
                    {
                      "componentName": "Text",
                      "props": {
                        "text": "请注意操作系统的语言类型。",
                        "style": "color: #e37d29;"
                      },
                      "id": "56d36c27"
                    }
                  ]
                }
              ],
              "id": "e3b02436"
            }
          ],
          "id": "59aebf2b"
        }
      ],
      "id": "87ff7b99"
    },
    {
      "componentName": "div",
      "props": {
        "style": "border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"
      },
      "children": [
        {
          "componentName": "TinyForm",
          "props": {
            "labelWidth": "80px",
            "labelPosition": "top",
            "inline": false,
            "label-position": "left ",
            "label-width": "150px",
            "style": "border-radius: 0px;"
          },
          "children": [
            {
              "componentName": "TinyFormItem",
              "props": {
                "label": "系统盘",
                "style": "border-radius: 0px;"
              },
              "children": [
                {
                  "componentName": "div",
                  "props": {
                    "style": "display: flex;"
                  },
                  "id": "cddba5b8",
                  "children": [
                    {
                      "componentName": "TinySelect",
                      "props": {
                        "modelValue": "",
                        "placeholder": "请选择",
                        "options": [
                          {
                            "value": "1",
                            "label": "黄金糕"
                          },
                          {
                            "value": "2",
                            "label": "双皮奶"
                          }
                        ],
                        "style": "width: 200px; margin-right: 10px;"
                      },
                      "id": "a97fbe15"
                    },
                    {
                      "componentName": "TinyInput",
                      "props": {
                        "placeholder": "请输入",
                        "modelValue": "",
                        "style": "width: 120px; margin-right: 10px;"
                      },
                      "id": "1cde4c0f"
                    },
                    {
                      "componentName": "Text",
                      "props": {
                        "text": "GiB   \nIOPS上限240，IOPS突发上限5,000",
                        "style": "color: #575d6c; font-size: 12px;"
                      },
                      "id": "2815d82d"
                    }
                  ]
                }
              ],
              "id": "50239a3a"
            }
          ],
          "id": "e8582986"
        },
        {
          "componentName": "TinyForm",
          "props": {
            "labelWidth": "80px",
            "labelPosition": "top",
            "inline": false,
            "label-position": "left ",
            "label-width": "150px",
            "style": "border-radius: 0px;"
          },
          "children": [
            {
              "componentName": "TinyFormItem",
              "props": {
                "label": "数据盘",
                "style": "border-radius: 0px;"
              },
              "children": [
                {
                  "componentName": "div",
                  "props": {
                    "style": "margin-top: 12px; display: flex;"
                  },
                  "id": "728c9825",
                  "children": [
                    {
                      "componentName": "Icon",
                      "props": {
                        "style": "margin-right: 10px; width: 16px; height: 16px;",
                        "name": "IconPanelMini"
                      },
                      "id": "fded6930"
                    },
                    {
                      "componentName": "TinySelect",
                      "props": {
                        "modelValue": "",
                        "placeholder": "请选择",
                        "options": [
                          {
                            "value": "1",
                            "label": "黄金糕"
                          },
                          {
                            "value": "2",
                            "label": "双皮奶"
                          }
                        ],
                        "style": "width: 200px; margin-right: 10px;"
                      },
                      "id": "62734e3f"
                    },
                    {
                      "componentName": "TinyInput",
                      "props": {
                        "placeholder": "请输入",
                        "modelValue": "",
                        "style": "width: 120px; margin-right: 10px;"
                      },
                      "id": "667c7926"
                    },
                    {
                      "componentName": "Text",
                      "props": {
                        "text": "GiB   \nIOPS上限600，IOPS突发上限5,000",
                        "style": "color: #575d6c; font-size: 12px; margin-right: 10px;"
                      },
                      "id": "e7bc36d6"
                    },
                    {
                      "componentName": "TinyInput",
                      "props": {
                        "placeholder": "请输入",
                        "modelValue": "",
                        "style": "width: 120px;"
                      },
                      "id": "1bd56dc0"
                    }
                  ],
                  "loop": {
                    "type": "JSExpression",
                    "value": "this.state.dataDisk"
                  }
                },
                {
                  "componentName": "div",
                  "props": {
                    "style": "display: flex; margin-top: 12px; border-radius: 0px;"
                  },
                  "children": [
                    {
                      "componentName": "Icon",
                      "props": {
                        "name": "IconPlus",
                        "style": "width: 16px; height: 16px; margin-right: 10px;"
                      },
                      "id": "65c89f2b"
                    },
                    {
                      "componentName": "Text",
                      "props": {
                        "text": "增加一块数据盘",
                        "style": "font-size: 12px; border-radius: 0px; margin-right: 10px;"
                      },
                      "id": "cb344071"
                    },
                    {
                      "componentName": "Text",
                      "props": {
                        "text": "您还可以挂载 21 块磁盘（云硬盘）",
                        "style": "color: #8a8e99; font-size: 12px;"
                      },
                      "id": "80eea996"
                    }
                  ],
                  "id": "e9e530ab"
                }
              ],
              "id": "078e03ef"
            }
          ],
          "id": "ccef886e"
        }
      ],
      "id": "0fb7bd74"
    },
    {
      "componentName": "div",
      "props": {
        "style": "border-width: 1px; border-style: solid; border-color: #ffffff; padding-top: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; position: fixed; inset: auto 0% 0% 0%; height: 80px; line-height: 80px; border-radius: 0px;"
      },
      "children": [
        {
          "componentName": "TinyForm",
          "props": {
            "labelWidth": "80px",
            "labelPosition": "top",
            "inline": false,
            "label-position": "left ",
            "label-width": "150px",
            "style": "border-radius: 0px;"
          },
          "children": [],
          "id": "21ed4475"
        },
        {
          "componentName": "TinyRow",
          "props": {
            "style": "border-radius: 0px; height: 100%;"
          },
          "children": [
            {
              "componentName": "TinyCol",
              "props": {
                "span": "8"
              },
              "id": "b9d051a5",
              "children": [
                {
                  "componentName": "TinyRow",
                  "props": {
                    "style": "border-radius: 0px;"
                  },
                  "children": [
                    {
                      "componentName": "TinyCol",
                      "props": {
                        "span": "5",
                        "style": "display: flex;"
                      },
                      "id": "02352776",
                      "children": [
                        {
                          "componentName": "Text",
                          "props": {
                            "text": "购买量",
                            "style": "margin-right: 10px;"
                          },
                          "id": "0cd9ed5c"
                        },
                        {
                          "componentName": "TinyInput",
                          "props": {
                            "placeholder": "请输入",
                            "modelValue": "",
                            "style": "width: 120px; margin-right: 10px;"
                          },
                          "id": "2f9cf442"
                        },
                        {
                          "componentName": "Text",
                          "props": {
                            "text": "台"
                          },
                          "id": "facd4481"
                        }
                      ]
                    },
                    {
                      "componentName": "TinyCol",
                      "props": {
                        "span": "7"
                      },
                      "id": "82b6c659",
                      "children": [
                        {
                          "componentName": "div",
                          "props": {},
                          "id": "9cd65874",
                          "children": [
                            {
                              "componentName": "Text",
                              "props": {
                                "text": "配置费用",
                                "style": "font-size: 12px;"
                              },
                              "id": "b5a0a0da"
                            },
                            {
                              "componentName": "Text",
                              "props": {
                                "text": "¥1.5776",
                                "style": "padding-left: 10px; padding-right: 10px; color: #de504e;"
                              },
                              "id": "d9464214"
                            },
                            {
                              "componentName": "Text",
                              "props": {
                                "text": "/小时",
                                "style": "font-size: 12px;"
                              },
                              "id": "af7cc5e6"
                            }
                          ]
                        },
                        {
                          "componentName": "div",
                          "props": {},
                          "id": "89063830",
                          "children": [
                            {
                              "componentName": "Text",
                              "props": {
                                "text": "参考价格，具体扣费请以账单为准。",
                                "style": "font-size: 12px; border-radius: 0px;"
                              },
                              "id": "d8995fbc"
                            },
                            {
                              "componentName": "Text",
                              "props": {
                                "text": "了解计费详情",
                                "style": "font-size: 12px; color: #344899;"
                              },
                              "id": "b383c3e2"
                            }
                          ]
                        }
                      ]
                    }
                  ],
                  "id": "94fc0e43"
                }
              ]
            },
            {
              "componentName": "TinyCol",
              "props": {
                "span": "4",
                "style": "display: flex; flex-direction: row-reverse; border-radius: 0px; height: 100%; justify-content: flex-start; align-items: center;"
              },
              "id": "10b73009",
              "children": [
                {
                  "componentName": "TinyButton",
                  "props": {
                    "text": "下一步: 网络配置",
                    "type": "danger",
                    "style": "max-width: unset;"
                  },
                  "id": "0b584011"
                }
              ]
            }
          ],
          "id": "d414a473"
        }
      ],
      "id": "e8ec029b"
    }
  ],
  "fileName": "createVm"
}

What is expected

What is actually happening

Any additional comments (optional)

No response

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

Title: 🐛 [Bug]: There is a problem with the rendering of Element-plus third-party components in preview state

ghost commented 10 months ago

@Cynwell 查看下appinfo.json中materialHistory.components中有没有element的相关组件

Cynwell commented 10 months ago

只有 tiny-engine/mockServer/src/services 里面有 appInfo.json。这个文件里面有 element-plus 组件的相关信息。

但我是通过 pnpm serve:frontend 启动 tiny-engine 的前端，以及用了 pnpm run dev 启动 tiny-engine-webservice 的后端服务。

下面这张图的左边是我的 tiny-engine/packages/design-core/ 的档案结构，但是没看到有 appInfo.json。右边开着的文件是 tiny-engine/mockServer/src/services 的 element-plus 组件的相关信息。

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

Only tiny-engine/mockServer/src/services contains appInfo.json. This file contains information about the element-plus component.

But I started the front-end of tiny-engine through pnpm serve:frontend, and used pnpm run dev to start the back-end service of tiny-engine-webservice.

The left side of the picture below is the file structure of my tiny-engine/packages/design-core/, but I don’t see appInfo.json. The file open on the right is information about the element-plus component of tiny-engine/mockServer/src/services.

ghost commented 10 months ago

@Cynwell 哦，不好意思。起了webservice之后就不依赖mockServer了。是不是数据库中没有element组件，user_components这张表

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

@Cynwell Oh, sorry. After starting webservice, we no longer rely on mockServer. Is there no element component in the database, user_components table?

ghost commented 10 months ago

@Cynwell 如果是没有同步到数据库中，可以参考下这里物料同步

Cynwell commented 10 months ago

对，database 的 user_components 表格里没有 element-plus。

所以如果需要引用第三方插件 element-plus 的话，我要先运行 pnpm splitMaterials 拆分脚本和 pnpm buildMaterials 构建脚本，然后再 pnpm serve:frontend？

ghost commented 10 months ago

先运行pnpm splitMaterials，然后运行pnpm buildMaterials，刷新下页面就好了。注意看下.env.local文件中的SQL配置，改为你本地的。

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

First run npm split Materials, then run npm build Materials, and refresh the page. Pay attention to the SQL configuration in the .env.local file and change it to your local one.

Cynwell commented 10 months ago

我刚刚在 tiny-engine 的目录里运行了 pnpm splitMaterials 和 pnpm buildMaterials，等 build 好没动静后，手动 Ctrl-C 停止，然后再运行 pnpm serve:frontend 启动 tiny-engine 前端。tiny-engine-data-center 服务一直都开着没改动。

然后浏览器的编辑器界面出现了错误 { "code": "CM001", "message": "系统异常，请稍后重试" }：

浏览器的编辑器预览界面也出现了错误 { "code": "CM002", "message": "pageInfo schemaContent 对象必须包含schema对象和 name字符串" }：

翻查记录，这个是从 tiny-engine-data-center 而来的错误，具体执行记录档在这里 https://pastebin.com/T77QRrtx：

现在前端报错，是哪里出错了？但是我的 database 一直都没改呀？

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

I just ran pnpm splitMaterials and pnpm buildMaterials in the directory of tiny-engine. After the build stopped, I manually stopped it with Ctrl-C, and then ran pnpm serve:frontend to start the tiny-engine front end. The tiny-engine-data-center service has always been enabled and has not been changed.

Then an error occurred in the browser's editor interface { "code": "CM001", "message": "System exception, please try again later" }:

There is also an error in the browser's editor preview interface { "code": "CM002", "message": "pageInfo schemaContent object must contain schema object and name string" }:

Checking the records, this is an error from tiny-engine-data-center. The specific execution record file is here https://pastebin.com/T77QRrtx:

Now the front end reports an error, what went wrong? But my database has not been changed?

ghost commented 10 months ago

@Cynwell 断点调试一下呢，看看是哪条数据有问题

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

@Cynwell Let’s debug with breakpoints to see which piece of data has the problem.

ghost commented 10 months ago

@Cynwell 更新下tiny-engine代码，清理下组件数据，重新执行下buildMaterials

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

@Cynwell Update the tiny-engine code, clean up the component data, and re-execute buildMaterials

Cynwell commented 10 months ago

可以，预览状态下现在能看到了 Element-plus 的组件了，谢谢！！

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

Okay, you can now see the Element-plus components in the preview state, thank you! !

opentiny / tiny-engine