概览

基础介绍

我们都知道，在UX之前展现层的组件分为几大块：明细表、清单表、图表、电子表格等，通过这些组件统一支撑起了展现层整体业务，项目上如想实现不同的展现需求就需要用各自对应的展现组件来配置实现，若要实现不同组件之间的交互，还得遵守各自的传参规范、协议等，故很大程度限制了组件之间的联动能力。而通过UX这一个组件，用户可以轻松实现明细表、清单表、图表、电子表格等展现需求的搭建，几乎所有展现层面的需求，都可以在UX内实现，免去了不同展现组件之间的交互、调度，大大降低了用户的搭建和使用成本，以及项目的运维成本，实现了展现层的UI、交互、业务逻辑的统一化。

名词表

数据源

顾名思义，即数据的来源。对于一个页面来说，它需要从服务端获取数据用于展示，也需要进行一些增删改的操作。在平台中，模型层的概念使得能够语义化的提供对模型资源操作的API，也就是各种业务动作。这些业务动作与前端的UI控件应当是解耦的。另外，对于单个场景的页面来说，例如表单、清单、图表等，它的数据源是单一的，无需复用的。而对于一个复杂页面来说，它的数据往往存在复用性。例如明细表中的表格数据同时使用图表来展现。因此，为了解耦与复用，我们定义了数据源

数据源具备以下基本特性：

关联一个可提供数据服务的元素
提供增删改查、自定义等对资源的操作

目前，UX支持以下数据源类型：

对象
领域模型
DeepQL
财务模型
Dataframe(Python)

控件

用来实现某项具体业务的最小单元，控件分为布局类控件、输入类控件、数据源控件、数据区域类控件。 布局类控件： 卡片、行布局等； 输入类控件： 文本框、数值、日期等； 数据源控件： 明细表、清单表、表单、图表等； 数据区域类控件： 子表格、数据卡片、可添加卡片等；根据不同的业务场景，对于数据源控件一般需要关联数据源（表单可不关联数据源用作查询区域），数据区域类控件必须关联对象，输入类控件可关联/不关联对象属性。

控件说明

组件名称	使用场景
开关	一般用于表达状态的变化，只有两个值：true、false；
文件上传	上传附件内容的场景：例如各项证明、材料、数据、合同等；
自定义按钮	用于配置对表单、页面、数据的操作按钮，例如保存、删除、编辑按钮等，通过这些按钮可以实现基本的跳转、增删改查逻辑等；
文本框	用于录入普通文本，比如身份证号、手机号、学号、员工编号、银行卡号、会员号等；
数值	用于录入数字类型的相关信息，比如金额、年龄、数量等，使用数值组件录入的数字，可以用来做数字计算、统计分析和汇总等；
选择框	从多个下拉选项中选择其中一项，比如选择请假表单内的请假类型、性别等字段的时候；
多行文本框	用于录入较长、较为复杂的内容，可自由的发表意见，提供更多信息，比如意见反馈等场景；
日期	需要选择日期或时间时，适用于加班、出差等场景；
日期区间	需要选择日期范围时，适用于查询某一时间段内订单列表等场景；
对象数据选择器-下拉	用于选择对象数据，下拉列表显示，通过该控件可配置各种联动、以及级联的效果；
对象数据选择器-平铺	用于选择对象数据，平铺显示，通过该控件可配置各种联动、以及级联的效果；
富文本	可以用于编辑一些图文嵌套的内容，所见即所得的文本编辑器；
多语言文本框	用于显示和使用对象侧的多语言类型属性；
滑动条	用于对数字类型的输入控件进行补充，更直观的展现并使用数据；
单选	用于更好的展示枚举值类型属性；
表单	用于数据的收集、校验和提交保存等，包含复选框、单选框、输入框、下拉选择框等元素。可当作一个查询区域使用，或作为python数据源输入参数；
明细表	也是表单的一种，可以实现业务模型多层嵌套的结构，通过该控件可实现业务模型的增删改查等；
清单表	通过该控件可以以表格的形式展示业务数据，并对数据进行管理，包括增删改查、导入导出等；
图表	以图表的形式展示业务数据，轻松实现海量数据可视化分析、展示，图表控件包含各种图表类型，如分析表、柱状图、面积图、饼图、折线图、散点图、瀑布图、组合图、矩形树图、多度量柱状图、区间条形图等；
指标卡	用于直观展示核心指标值(即度量值)及其变化趋势(如同比、环比)；
图与树	增加一个简易的流程图，用于固定绘制；
查询区域	清单表比较特殊的是一般会预置一个查询条件区域。该区域的查询逻辑与模型绑定；
卡片列表	多条数据的展示除了可以通过清单表、可添加卡片控件实现，还可通过卡片形式展示数据，即卡片列表控件；
甘特图	是一种项目管理工具，它能够以图形化的方式展示项目的进度、时间安排和任务分配情况，帮助管理者更好地规划和控制项目进度；
数据卡片	用表单的形式呈现数据，一般放在业务明细表控件中使用，只能关联1:1的对象；
子表格	用列表的形式呈现数据，一般放在业务明细表控件中使用，只能关联1：N的对象；
可添加卡片	用于数据量较少（可能就几条），但字段又比较多，甚至可能还有下层数据需要展示的场景，一般放在业务明细表控件中使用，只能关联1：N的对象；
卡片	布局容器的一种，通过卡片可以将同类似控件放在一个容器里；
行布局	用于布置画布控件的展示方式，使得画布中的控件可以按照多列展示；
边栏布局	类似行布局，左右布局（左侧占比较少）；
弹窗	带遮罩的模态弹窗，弹窗一般用于展示需要二次确认的内容，或在弹窗中填写复杂的内容，或通过弹窗查看详情等；
多标签页	布局容器的一种，在不同的标签页中放置不同控件，可配置不同的填写模板；
步骤条	作用是提示用户当前页面上的信息在自定义的步骤中的第几步；
分割线	用于划分页面区域，通过分割线可以使得页面内容层次更清晰；
图片	图片上传可以用来记录当前提交表单所需要的图片相关证明，例如上传身份证、报销的发票等；
图标	用于页面上展示图标信息，通常放在标题栏和标题一起使用；
文本	用于预置一段静态文本展示，包括说明、备注文案等；
IFrame	用于引入类似语雀文档等页面，相比菜单目前的自定义链接功能更丰富；
日历卡片	用于数据需要按照天/周/月/年等情况进行展示的场景；比如在待办页面中，根据日期去展示任务信息；在订单页面，按照日期去展示价格，显示价格浮动；