概览

基础介绍

DeepUX是一种低代码页面设计器，通过不同的数据源、各种控件（包括标准的以及自定义的）以及各种事件与动作的组合，实现页面的搭建。对整个系统的页面配置体验与能力进行统一。

名词表

数据源

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

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

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

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

业务领域

对象：DeepModel中的单一对象，无权限控制
领域模型：多对象根据特定业务组合而成的业务领域模型，可进行多表同时增删改查的操作，可进行权限控制
对象分析查询:使用已在DeepModel中配置完成的分析查询，将聚合后的数据通过图表等进行展示
DeepQL：使用已在DeepModel中配置完成的DeepQL语句，可用于图表展示、JS表达式配置等更多高级配置

财务领域

财务模型：按时间版本切片的财务多维数据模型，可用于图表等展示

自定义

DataFrame(Python)：在python脚本中定义数据结构与返回内容，可将自定义的高级数据处理后的数据返回给前端页面进行展示或其他使用

以上可参考模型文档进一步了解。

控件

用来实现某项具体业务的最小单元，控件分为布局类控件、输入类控件、数据源控件、数据区域类控件。 布局类控件： 卡片、行布局等； 输入类控件： 文本框、数值、日期等； 数据源控件： 明细表、清单表、表单、图表等； 数据区域类控件： 子表格、数据卡片、可添加卡片等；

控件说明

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

事件

事件是一种组件/页面之间的通信方式，每个控件/页面都能抛出它自己的事件，通过事件系统可以将用户的行为反馈到逻辑层进行处理，实现控件或页面之间的交互，同时还能传递数据。

动作

动作是一组可执行语句或计算过程。可以简单理解为当事件发生时可执行的一系列行为。例如控件有修改值、隐藏、禁用等动作，页面有打开、跳转动作等。

举个栗子：可以通过点击事件，获取到用户的点击行为，把某个控件隐藏掉。

表达式

为了实现前端页面的简要逻辑，UX支持JS表达式编写，并封装了许多语法糖以便使用。

UX整体结构

旧版本说明及与其他多版本组件的适配关系

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

由于类excel的电子表格与网页搭建仍存在本质的区别，因此电子表格仍以独立组件形式存在。在UX中可引入电子表格2.0版本，通过参数联动等配置项进行交互。

此外，在新版本中，我们通过DeepModel/领域模型定义了业务数据对象，不再支持直接连接关系型数据库进行复杂数据的展示。

因此从前端功能上来说，明细表、清单表、图表等旧版展现组件均由UX统一管理，不再单独存在。

由于DeepModel无法兼容所有数据库，此外也存在部分集成数据直接进入普通关系库，无需进行业务语义建模。因此也保留了【清单表1.2】组件，用于展示普通关系数据库的数据。

上一篇：JS API 接口文档

下一篇：快速入门

本页目录

基础介绍
名词表

数据源
控件
事件
动作
表达式

UX整体结构
旧版本说明及与其他多版本组件的适配关系

回到顶部

咨询热线

400-821-9199

我们使用 ChatGPT，基于文档中心的内容以及对话上下文回答您的问题。