工具（平台）的设计和实现

工具要做到高度可配，灵活重组，那就必须做到工具本身的功能是可以配置的，同时工具加载的编辑器是动态可配的。

技术栈的选择：

vue3+ts+pinia+webpack5+prettier+eslint+git+Jenkins

第一点：工具本身的功能是可以配置的

在技术实现上，就必须做到工具上所有可视化的东西都是通过动态加载的，用户可以通过修改这个配置或者给每个用户自定义这个配置，就可以出现不同的工具，这份配置我们可以把它抽象出来，通过一个后台管理系统去进行配置，用户选择什么样的功能，出来的工具就拥有什么样的能力，最后我们可以内置几种类型，可以通过行业去分类，可以通过试用-普通-高级的方式去分类等

第二点：工具加载的编辑器是动态可配的

要做到编辑器是动态可配的，就意味着编辑器以及编辑器依赖的面板都是动态加载的，因此我们需要在工具里面动态去加载所有面板的代码，而且这个面板代码的地址也是可以配置的，这里我们就要使用到基座+子应用的方案了

微前端的方案有很多：

1.乾坤

2.无界

3.iframe

4.module federation

5.script标签加载（同构+规范）

我们采取的方案是module federation+iframe的方案，同构是为了效率更高，异构是为了接入方便

最终的效果：

 公共的面板按照定义的规范提供方法出来，工具里面会有解释器去解释这个定义，然后把定义里面的事件，方法，参数串起来，进行连接，达到不需要修改任何代码就可以实现公共面板之间的互相调用

json定义：

{
  name:"ComponentPanel",
  alias:"组件面板",
  version:"1.0.1", 
  method:[
    {
        name:"refresh",
        alias:"更新数据",
        payload:[
           {
                type:'localVar',name:'id',alias:"组件id"
            }
        ]  
    }
  ],
}