架构-vue拖拽平台

1.文件解读
    src/data.json:拖拽组件内容区域配置文件（包含组件样式和需要渲染的组件）
        {
            "container": { //内容区域宽高
                "width": 550,
                "height": 550
            },
            "blocks": [   // 内容区域组件数组
            ]
        }
    packages/editor.jsx:拖拽组件布局组件
    packages/editor-block.jsx:内容区域每个组件配置
    utils/editor-config.jsx:需要渲染的组件配置
2.在packages/editor.jsx文件中实现拖拽组件布局
3.utils/editor-config.jsx:文件中配置需要渲染的组件，registerConfig.registe方法注册组件，componentMap属性为组件映射表
4.App.vue组件中将data.json数据传给editor.jsx，utils/editor-config.jsx数据变为全局数据
5.packages/editor.jsx文件的editor-left区域渲染可以拖拽组件的预览区域
6.packages/editor-block.jsx文件根据data.json文件中的blocks属性渲染对应的组件和组件位置
7.packages/useMenuDragger.js文件中拖拽松手时drop，把拖拽组件加到data.json的blocks中，在packages/editor-block.jsx文件onMounted事件让鼠标在元素中间（原本鼠标在元素左上角）
8.packages/editor.jsx文件的useFocus的blockMousedown事件，当选中拖拽组件内容区域的组件时，给组件添加focus属性，聚焦组件和不聚焦组件放在focusData里面，点击容器其它区域取消聚焦
9.packages/editor.jsx文件的useFocus的回调mousedown是获取要拖拽组件焦点后执行的事件，useBlockDragger.js文件中dragState记录拖拽前的组件位置信息，mousemove事件记录组件拖拽的位置
    更新组件的定位位置
10.useFocus.js文件中通过selectIndex属性记录最后获取焦点的组件索引用于做辅助线，packages/editor.jsx文件的containerMousedown方法点击内容区域时取消索引
11.useBlockDragger.js文件中记录所有非移动元素十根辅助线的位置和拖拽元素的位置（还有最外层内容区域元素）放在dragState.lines中，mousemove时计算横线和纵向的位置放在markLine中，
    packages/editor.jsx文件的内容区域将线渲染出来即可。同时重新计算moveX和moveY完成快吸功能（即将元素拖拽在十个相对比较常用的位置）
12.useMenuDragger.js文件中拖拽物料和结束拖拽（和useBlockDragger文件中拖拽组件和结束拖拽）使用mitt库触发对应的回调，useCommand.js文件的drag指令init中保存拖拽前和拖拽后内容区域组件
    前进指令就调用drag中的redo，后退指令就调用drag中的undo，keyboardEvent中让ctrl+y和ctrl+z执行前进和后退操作
13.packages/editor.jsx文件的$dialog实现导入导出data.json数据，在useCommand.js文件的updateContainer指令实现保存导入记录
14.在useCommand.js文件的placeTop和placeBottom和delete指令实现置顶和置地和删除功能
15.packages/editor.jsx文件实现编辑（可拖拽状态）和预览（不可拖拽状态）功能，预览时不能拖拽（useFocus的containerMousedown和blockMousedown第一行），编辑时去掉组件隐形蒙版，实现关闭功能（点击关闭只渲染内容区域即可）
16.在components/Dropdown.jsx中实现鼠标右键编辑单个组件，useCommand.js文件中updateBlock指令增加编辑单个组件前进后退功能
17.在components/editor-operator.jsx中实现组件属性操作栏，根据组件配置的属性，渲染组合一个点击的组件可操作的属性
18.packages/editor-block.jsx文件中拿到组件配置属性，editor-config.jsx文件中render方法根据组件属性渲染组件，editor-operator.jsx中apply和reset操作组件属性
19.实现输入框双向数据绑定，editor-block.jsx文件中render方法的model实现双向数据绑定
20.实现范围选择器双向数据绑定，utils/editor-config.jsx的range组件
21.实现下拉菜单物料(components/TableDialog.jsx和utils/editor-config.jsx的下拉框组件)
22.实现改变组件大小，editor-config.jsx文件中中可以修改组件大小的加上resize字段，editor-block.jsx文件中聚焦时和可以修改组件宽高时在BlockResize组件中渲染拖拽点
    block-resize.jsx文件根据拖拽的点去修改组件宽高和定位位置即可，在editor-config.jsx文件的render方法加上组件宽高样式即可
23.总结
    1)editor.jsx是整个拖拽组件，包含左边物料，上边操作按钮，右边属性配置，中间内容区
    2)左边物料的内容来自editor-config.jsx文件中preview，涉及的事件来自useMenuDragger.js
    3)中间内容区的内容来自editor-config.jsx文件中render（拖拽物料区时把组件信息放在data.json文件的blocks属性上，渲染时根据组件key值渲染对应组件即可），组件拖拽
      事件涉及文件useFocus.js和useBlockDragger.js
    4)上边操作按钮主要是前进和后退编辑操作，涉及的事件来自useCommand.js
    5)右边属性配置内容来自editor-config.jsx文件中props和model，编辑好的属性传到editor-block.jsx文件的render（即editor-config.jsx文件中render）然后渲染组件即可
    6)改变组件大小功能在editor-block.jsx文件的BlockResize