组件设计器

概述

在大型信息系统中，我们面临着这样一个挑战：如何在复杂场景下实现更加人性化的界面数据交互。对于通用型、原子性 的系统设计很难满足这种需求。

为了实现这一目标，平台提供了自定义组件、外部系统等方法，通过iframe嵌入由前端开发人员预先开发好的页面。但这种方式无疑提高了系统设计人员的能力要求。

为了降低门槛，我们亟需寻找一种更简单易上手的方法。为此，平台推出了组件设计器 功能。通过拖拽式操作，设计人员可以轻松构建页面的展示和交互逻辑。此外，系统还提供了模板、样式表、脚本、蓝图 等工具，以实现页面数据的绑定和数据流转逻辑。

概念

设计人员快速上手需要熟悉组件设计器中的以下基础概念

模板

基于 HTML 的模板语法。设计人员在画布上通过拖拉拽操作设计后，生成对应的Html代码结构。设计人员也可以直接修改代码结构后更新到画布上。

样式表 (css)

对于模板展示的内容的美化，可通过样式声明进行对模板中的元素进行个性化的控制，也可以使用同一样式声明美化使用这一声明的元素。

TIP

模块也提供了模板元素界面化配置项，设计人员也可以直接通过配置实现相同的功能。

脚本

对设计完成的模板进行数据、交互逻辑等方面的完善。

• 公用工具类文件依赖
• 数据定义
• 数据处理
• 模板生命周期拦截
• 模板事件处理

蓝图

脚本的图形化实现，系统提供了丰富的步骤，以协助设计人员快速实现业务逻辑

原理

在当前版本下，平台对于组件设计器搭建的组件，在渲染时使用Vue进行渲染。

平台会将设计人员构建的模板、样式和脚本(脚本蓝图会自动转换为脚本)按照Vue 组件规范组转换为一个单文件组件(SFC)， 生成的Vue组件文件后交由Vue Cli 以库模式(lib) 编译生成最终的css和js，然后在引用组件的功能通过动态挂载CSS和JS方式最终将设计的组件渲染给用户。这一整个过程是由平台自动完成，无需设计人员干预。