飞码LowCode前端技术（四）-京东云开发者社区

（如何便捷配置出页面-3）
作者：王光辉
部门：京东科技-市场与平台运营中心-营销与数据资产部-营销及数据平台研发部
## 简介
飞码是京东科技-市场与平台运营中心-平台研发部研发低代码产品，可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具，从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码，分别是：（1）、背景与数据结构设计，（2）、如何便捷配置出页面-1，（3）、如何便捷配置出页面-2，**（4）、如何便捷配置出页面-3**，（5）、如何便捷配置出页面-4，（6）、如何便捷快速验证实现投产及飞码探索，（7）、飞码画布的设计。

本小节从模板与页面收藏与升级、页面UI结构、画布功能三个方面进行分析，其中画布设计部分会在后面章节介绍，本章节仅分析画布业务支持能力方面。

## 一、模板与页面收藏升级设计
**模板收藏与升级**：在飞码[LowCode前端技术（二）]章节中对模板的收藏进行了说明。飞码模板（包括官方模板）可以进行升级，编辑。飞码对模板分类以及升级流程方案详见图1
<div style="display: flex; justify-content:center; width:100%">
    <img src="https://storage.360buyimg.com/fei-ma/神灯使用/202207/04/01.png" width="55%"/>
</div>
<div style="display: flex; justify-content:center;width:100%">
      <span>图1</span>
</div>

当用户收藏模板之后，可以在飞码管理端进行编辑，编辑之后飞码服务端会更新对应的模板DSL。飞码没有对模板的版本进行管理，模板的使用是一个快照，当研发用户拖动模板到编辑页面的时候，会对模板中组件id进行更新。飞码的模板DSL与飞码页面DSL保持一致，详见飞码[LowCode前端技术（一）](http://xingyun.jd.com/shendeng/article/detail/3867?forumId=79&jdme_router=jdme%3A%2F%2Fweb%2F202206081297%3Furl%3Dhttps%3A%2F%2Fshendengh5.jd.com%2FarticleDetail%3Fid%3D3867)。
**页面收藏与升级**：飞码的页面收藏能力在飞码后管进行操作，飞码页面的收藏是一个快照。搭建页面期间会遇到很多类似的页面，这样就可以通过页面收藏，之后在进行编辑。页面收藏逻辑详见图2
<div style="display: flex; justify-content:center; width:100%">
    <img src="https://storage.360buyimg.com/fei-ma/神灯使用/202207/04/02.png" width="55%"/>
</div>
<div style="display: flex; justify-content:center;width:100%">
      <span>图2</span>
</div>

页面收藏之后在使用页面的时候会创建一个页面快照，生成一个新页面id。页面收藏，个人页面收藏同时也是快手的收藏。当官方页面、个人页面变化的时候，之前收藏的页面不会发生变化。
	**问题**：是不是对模板与页面增加版本号？之后根据版本号进行选择性配置。
飞码之前考虑过模板与官方页面都有版本号进行控制，在使用阶段发现版本号的选择与理解会增加用户心智负担。在web页面中复用的模板与页面并不太多，飞码暂时没有模板与页面模板版本号，后续业务根据情况考虑是否增加。

## 二、页面UI结构设计
	页面UI结构，飞码用树的形式实时展示。当画布是页面级编排的时候，UI结构是页面级别的。当画布是局部视图（开启另外一个视图，实现局部放大能力，实现视图的便捷配置）时候，UI结构是局部视图级别的。可以理解为UI结构与当前画布中组件结构一一对应。如图3
	
<div style="display: flex; justify-content:center; width:100%">
    <img src="https://storage.360buyimg.com/fei-ma/神灯使用/202207/04/03.gif" width="70%"/>
</div>
<div style="display: flex; justify-content:center;width:100%">
      <span>图3</span>
</div>

页面UI数据结构在[飞码LowCode前端技术（一）]中对数据结构进行了分析。飞码在编辑态中数据结构进行了区分，分为页面数据结构、局部视图数据结构。局部视图数据结构数据是缓存数据，使用detailViewCanvas进行缓存（如何与页面数据结构结合，在画布小节说明）。UI数据结构整体设计详见图4
<div style="display: flex; justify-content:center; width:100%">
    <img src="https://storage.360buyimg.com/fei-ma/神灯使用/202207/04/04.png" width="75%"/>
</div>
<div style="display: flex; justify-content:center;width:100%">
      <span>图4</span>
</div>

编辑态的页面UI数据结构与运行态（投产）是一致的。
## 三、画布设计
画布的详细设计与技术实现详见[飞码LowCode前端技术（七）]，该小节侧重描述画布功能以及局部视图如何与主视图结合的能力。
	**支持精准拖拽**：详见图5
<div style="display: flex; justify-content:center; width:100%">
    <img src="https://storage.360buyimg.com/fei-ma/神灯使用/202207/04/05.gif" width="70%"/>
</div>
<div style="display: flex; justify-content:center;width:100%">
      <span>图5</span>
</div>

飞码组件在布局的时候对于目标组件进行上、右、下、左四个区域区分。实时监控鼠标位置，之后对目标组件进行判断。若支持子组件的组件中没有组件，例如div，放入第一个组件的时候会显示“里”。详见图6所示

组件的拖拽会实时监控目标组件（包括是不是支持内部增加组件），鼠标位置。具体算法逻辑会在[飞码LowCode前端技术（七）]中进行说明。
**上下移动复制删除**：
图6可以看出，飞码画布会对选中组件实时监控父级与兄弟组件，进而确定是否支持上下移动。飞码组件复制是对组件以及子组件完全复制，包括子组件中配置的事件或者数据。
**特定组件扩展特定能力**：
飞码认为form组件，table组件，为复杂类型组件。飞码认为复杂组件的配置便捷性需要挨着组件区域最近的地方，最大能力提升便捷性。
对form组件，经常配置内部组件布局。详见图7

对table组件，经常配置内部组件布局。详见图8
<div style="display: flex; justify-content:center; width:100%">
    <img src="https://storage.360buyimg.com/fei-ma/神灯使用/202207/04/08.gif" width="70%"/>
</div>
<div style="display: flex; justify-content:center;width:100%">
      <span>图8</span>
</div>

飞码对table中的组件进行了列的拖拽排序，prop与labe的快速设置，快速增加一列能力。同时飞码对table组件与右侧配置表单进行了绑定，实现快速定位能力。
问题：飞码对组件便捷区3个点(…)是否支持远程组件下发的时候一起下发对应能力？
飞码对该部分能力还没有开放，目前仅支持官方组件的能力扩展。后续根据实际业务场景考虑是否开放该部分能力。
**复杂区域配置应支持局部画布**：
图7中el-table-column区域配置多个按钮的时候，点击该区域内的小方块，会唤起局部视图。局部视图中与页面画布功能完全一致。可以随意对组件进行组合。在[飞码LowCode前端技术（一）]中介绍了飞码弹框是通过一个数组进行管理的。通过弹框的数据结构可以看出，每一个弹框是一个局部视图，通过事件唤起弹框。

**局部视图如何与主视图结合**：
飞码将局部视图划分为两种：一是弹框类（包含Dialog，drawer），二是组件类（目前包含table、tabs）
第一类：弹框是通过事件触发的，于是飞码事件编排中选择对应的弹框即可。在数据结构中弹框与事件有关，与页面无关。
第二类：该部分在页面或者弹框内，与常规数据结构一样，通过children字段表示。

## 四：小结
本章节分析了飞码如何便捷配置出页面-3，分别对模板与页面收藏与升级、页面UI结构、画布功能三个方面进行了详细介绍。飞码的UI结构设计、画布设计符合常规设计模式，对弹框进行了统一管理。下章节介绍[飞码LowCode前端技术（五）]如何便捷配置出页面-4，持续分析飞码编辑态中外围能力部分，分别是监控、页面配置、页面数据导入导出以及其他能力。