html-to-mastergo

介绍

这是2023年服务外包创新创业大赛的第五个赛题，同时也是我的毕设，但我并没有参赛。 本插件通过html嵌入iframe和拖拽导入的方式实现，以最原始、最简单的方式进行导入，如官方介绍视频所演示的那样，对阴影和渐变支持度比较高，但缺陷也非常大。

软件架构

安装教程

由于项目涉及到了后端，而后端并未部署在服务器上，本插件仅提供了调试方法：

1. 要求有node.js环境
2. 将本插件的源码克隆到本地，在该插件目录下运行： npm install -> npm run build 或者 yarn -> yarn build
3. 本插件下的proxy.js文件是node代理文件，需要运行 node ./proxy 命令进行启动
4. 下载MasterGo客户端并安装
5. 在画布中右键->插件->开发插件->创建/添加插件，将本插件的manifest.json上传到masterGo
6. 上传成功后，可以在画布右键的开发插件中找到该插件项，点击即可运行

使用说明

1. 可通过输入url和上传html文件两种方式获取网页的结构和样式
2. 点击确定后跳转到html展示页，可直接拖拽展示页上的网页元素导入到画布中

演示

工作原理

优点

1. 简单易用（仅代理后端部署在服务器上时）
2. 阴影和渐变支持度较高

缺陷

非常多，主要在于大部分网页元素的布局都不能支持（），目前仅能显示拖拽时的样式，url爬虫方式是个摆设等…… 如果出现元素导入成功但布局乱了的情况，如按钮中的文字不在按钮中，可以尝试再拖拽一次，这个bug我修不来； 如果出现布局整体较好但部分元素乱位的情况，这个bug我也修不来，很可能是页面元素的宽高属性为auto的原因

我知道自己做的并不好，也知道github上有更好的，但限于本人技术水平，写到这个程度已经是极限了，请看到这里的各位不要过于苛刻。