Zone 底座:常量定义
使用
import Ux from 'ux';
const value = Ux.Env.xxx;
常量分类
- 系统变量:配置在 开发 和 生产 中的系统环境变量。
- 调试变量:配置在环境变量文件中以
Z_DEV
开头的变量。 - 类型常量:直接定义的用于类型定义的常量,部分类型常量和业务组件相关。
核心点:
- 没有在API文档中追加注释的环境变量您可以直接从云端白皮书中查看。
- 和环境变量相关的常量您可以直接在标题中看到环境变量名,左侧目录中是
Ux.Env.XXX
中的XXX
部分,针对环境变量的常量引用不考虑Z_
前缀。 Meta
前缀的变量存储的都是名称元数据,您可以使用该名称从浏览器中的SessionStorage
和LocalStorage
中直接提取对应键值中包含的数据。Value
前缀的变量为全局值,Zero UI扩展框架中的核心值相关信息。
Members
(static, constant) (?ENV)
(ENV) 标准环境变量
标准环境变量教程可参考:5.1.3.环境变量
环境变量文件
环境变量文件位于根目录之下,从 .env.development.tpl
文件拷贝而来,若您下载的是最新的脚手架,内部会包含环境变量模板文件,直接拷贝即可。
.env.development
:开发环境环境变量文件。.env.production
:生产环境环境变量文件。
核心点
- 所有自定义的环境变量在文件中都带有
Z_
前缀。 - 使用
Ux.Env
引用环境变量时,不需要Z_
前缀,直接去掉Z_
即可引用。 - 有两个核心变量是关乎前后端的
Z_ROUTE
:前端路由内容路径前缀,不同应用其前缀有所区别,通常绑定 应用 或 租户。Z_ENDPOINT
:后端服务端点前缀,访问不同接口时会有所区别。
- 所有样式相关的环境变量都带有
Z_CSS
前缀。 - 登录会话(当前账号)类的变量都带有
Z_K
前缀,且扩展出来后都会带上当前账号ID做合并计算。
(static, constant) CHANGE :Object
变更模式
基本说明
变更模式主要用于变更记录、数据比对、以及操作反射等综合性场景,现阶段支持的变更模式主要包括:
- ADD:新增
- REPLACE:更新/替换
- APPEND:更新/追加
- DELETE:删除
追加和替换单独拎出来作为变更的两种扩展模式,在传统系统中默认使用的是替换的更新模式,而此处有追加之后您的变更模式就会潜移默化发生该变。
模式的细分主要是为了处理多种场景:
- 输入属性的清空操作,在 Zero UI 中,系统采用了 JavaScript 中的两个特殊值:
undefined
:表示属性不存在,此时系统会认为该属性不执行任何操作,跳过变更。- null:表示属性存在,但值为空,此时系统会认为该属性执行删除操作(清空)。
- 追加操作,追加操作主要用于特定对象的合并,默认值 + 更新值,可实现:
- 更新值优先:REPLACE 替换模式
- 默认值优先:APPEND 追加模式
Type:
- Object
(static, constant) CV_DELETE :String
Value:删除值
基本说明
系统默认的删除标记值,值为 __DELETE__
,用来标记删除的数据,提供给前端做移除。
Type:
- String
(static, constant) CV_EXPAND :String
Value:展开菜单值
(略)同 Ux.Env.VALUE.EXPAND
Type:
- String
(static, constant) CV_FORBIDDEN :String
Value:权限限制值
基本说明
在ACL的权限控制中,表单数据分为三态:
- 可编辑
- 只读
- 有数据不可查看:如果有数据不可查看,则会显示成 FORBIDDEN 设置的值。
这个变量只会在ACL权限控制中使用,其他地方不可使用,该变量会隐藏真实数据而导致数据本身不可查看。
通常意义上,显示成********的数据是不可编辑的,因为编辑会带来副作用,所以表单从原始的四态变成了三态。
表单的状态表格如下:
维度 | 有权限 | 无权限 |
---|---|---|
可编辑 | 编辑数据 | x(不支持) |
只读 | 显示数据 | ******** |
Type:
- String
(static, constant) DEBUG :Boolean
全局调试参数(跨环境)Z_DEV_DEBUG
- 来源:
process.env.Z_DEV_DEBUG
启用 Zero UI 专用调试参数,此参数主要用来屏蔽 console.log / console.info
等日志信息,这些日志信息在开发环境可生效,但在生产环境尽可能少地打印相关信息实现日志的清晰化。
示例
// 直接调用 Ux 执行判断
// 「内部」
import Cv from './constant';
if(Cv.DEBUG){
// 内部,研发模式代码
}
// 「外部」
import Ux from 'ux';
if(Ux.Env.DEBUG){
// 外部,开发模式代码
}
Type:
- Boolean
(static, constant) DEBUG_AJAX :Boolean
Ajax调试参数 Z_DEV_AJAX
- 来源:
process.env.Z_DEV_AJAX
- 依赖:
process.env.Z_DEV_MOCK
启用Ajax请求的专用监控流,启用之后,您可以在浏览器的 console 中直接看到所有Ajax的请求信息:
- 请求详细信息,包括请求头、请求体。
- 响应详细信息,包括响应头、响应体。
- 数字签名相关信息。
- 应用相关自定义头相关信息。
- Qr 查询引擎请求信息。
Type:
- Boolean
(static, constant) DEBUG_DEV :Boolean
全局调试参数(开发)Z_DEBUG_DEV
- 来源:
process.env.Z_DEV_DEBUG / process.env.NODE_ENV
启用 Zero UI 框架中的调试参数以及 NodeJS 原生环境来控制调试信息,调试信息只有在如下条件满足时可触发:
- NodeJS原生环境:
NODE_ENV=development
开发环境才触发。 - ZeroUI环境:
Z_DEV_DEBUG=true
打开调试模式才可。
Type:
- Boolean
(static, constant) DEBUG_FORM :Boolean
表单渲染器调试参数 Z_DEV_FORM
- 来源:
process.env.Z_DEV_FORM
新版表单日志是中文,表单渲染器主要包含如下日志信息:
- 表单基本布局信息。
- 表单行额外配置信息。
- 表单单元格中的
optionItem
和optionJsx
相关信息。 - 表单初始化数据信息。
- 提交和加载流程中的表单数据信息。
Type:
- Boolean
(static, constant) DEBUG_QR :Boolean
Qr调试参数 Z_DEV_QR
- 来源:
process.env.Z_DEV_QR
针对Qr引擎的专用调试参数,启用之后,您可以在浏览器的 console 中直接看到所有Qr引擎的请求信息,该参数目前主要面相 ExListComplex
组件,您可以在此组件中监控核心变量相关信息。
Type:
- Boolean
(static, constant) DEV :Object
开发参数
基本说明
针对特定场景做调试的专用参数,该参数可让您在调试过程中跳过某些步骤或直接执行后续流程。
参数名 | 参数值 | 说明 |
---|---|---|
SKIP_VALIDATE |
__SKIP_VALIDATE |
跳过验证流程,直接执行下一步。 |
Type:
- Object
(static, constant) ENTRY_ADMIN :String
管理页 Z_ENTRY_ADMIN
- 来源:
process.env.Z_ENTRY_ADMIN
- 依赖:
process.env.Z_ROUTE
前端管理界面的主界面,您可以重新定义主界面,语义为:登录之后第一次合法进入的管理首页。
Type:
- String
(static, constant) ENTRY_FIRST :String
密码更改页 Z_ENTRY_FIRST
- 来源:
process.env.Z_ENTRY_FIRST
- 依赖:
process.env.Z_ROUTE
首次登录之后,需要更改密码的页面,您可以重新定义该页面,在Zero UI中,如果您的初始密码和服务端配置的初始密码一致,系统会强制要求您首次登录之后引导到此页面完成密码修改,停留在密码修改页时,您无法进行任何操作,直到密码修改完成后重新登录。
Type:
- String
(static, constant) ENTRY_LOGIN :String
登录页 Z_ENTRY_LOGIN
- 来源:
process.env.Z_ENTRY_LOGIN
- 依赖:
process.env.Z_ROUTE
Zero UI开发完成后的登录首页,您可自定义登录首页的路由地址,该地址不包含 Z_ROUTE
的路由部分,不仅此处,Zero UI 内部存储的所有路由信息都不包含 Z_ROUTE
的前端路由定义,前端路由定义是一个全局定义。例:
定义了前端页面地址为: /rbac/user
Z_ROUTE: ht
最终生成页面为: /ht/rbac/user(react-router 可捕捉的地址)
根据上述例子,最终的前端路由地址为:/ht/rbac/user
,而不是 /rbac/user
,即所有页面都是计算而得,如此所有的页面在不同的应用和租户环境中可直接重用。
Type:
- String
(static, constant) E_TYPE :Object
数据类型
基本说明
建模专用的类型变量,全称为 Entity Type
,简称为 E Type
,包括如下值:
变量 | 值 | 说明 |
---|---|---|
E_TYPE.DATA_OBJECT |
DataObject |
自定义类型中的 DataObject |
E_TYPE.DATA_ARRAY |
DataArray |
自定义类型中的 DataArray |
E_TYPE.DATA_ASSIST |
DataAssist |
自定义类型中的 DataAssist ,辅助字典 |
E_TYPE.DATA_TABULAR |
DataTabular |
自定义类型中的 DataTabular ,列表字典 |
E_TYPE.NAVIGATOR |
Navigator |
自定义类型中的 Navigator ,路由对象 |
核心点
前端自定义类型在 TypeScript
中定义,用于提供统一的API访问模型实例下的记录集,您可以直接使用此类型对基础类型执行封装,内部带有防御式编程的特性,可以有效的保证数据的安全性。
示例:src/zone/fn.under.is.decision.js
const isTObject = (input) => {
if (isTEntity(input)) {
return __V_MODEL.E_TYPE.DATA_OBJECT === input.__type();
} else return false;
}
Type:
- Object
(static, constant) FORBIDDEN :String
- Deprecated:
- Yes
Value:权限限制值(旧)
新版推荐使用 Ux.Env.CV_FORBIDDEN
常量。
Type:
- String
(static, constant) GRID :Object
App:布局专用
基本说明
布局专用,统一布局 Col 比例(支持自适应效果),针对列表类工具栏专用布局:
LIST_NE
:---- ------------ --------
:不带 Extra 的列表布局LIST_E
:---- -------- -------- ----
:标准列表布局LIST_TT
:--- ---------- --------- --
:任务系统列表布局LIST_WF
:--- -- --------------- ----
:工作流列表布局
Type:
- Object
(static, constant) HTTP11 :Object
HTTP11常量
基本说明
HTTP11 中的请求头所有标准协议常量,该常量的命名规则如下:
- 将原始请求头全部大写。
- 所有的
-
转换成_
生成对应的键值的。
使用的参考代码如下:
// 下载专用头设置,客户端只接受 octet-stream 格式
headers.append(Cv.HTTP11.ACCEPT, "application/octet-stream");
headers.append(Cv.HTTP11.CONTENT_TYPE, "application/octet-stream");
值列表
目前版本支持的值列表(所有定义):
{
"ACCEPT": "Accept",
"ACCEPT_CHARSET": "Accept-Charset",
"ACCEPT_ENCODING": "Accept-Encoding",
"ACCEPT_LANGUAGE": "Accept-Language",
"ACCEPT_RANGES": "Accept-Ranges",
"AGE": "Age",
"ALLOW": "Allow",
"AUTHORIZATION": "Authorization",
"CACHE_CONTROL": "Cache-Control",
"CONNECTION": "Connection",
"CONTENT_BASE": "Content-Base",
"CONTENT_ENCODING": "Content-Encoding",
"CONTENT_LENGTH": "Content-Length",
"CONTENT_LOCATION": "Content-Location",
"CONTENT_MD5": "Content-MD5",
"CONTENT_RANGE": "Content-Range",
"CONTENT_TYPE": "Content-Type",
"DATE": "Date",
"ETAG": "ETag",
"EXPIRES": "Expires",
"FORM": "Form",
"HOST": "Host",
"IF_MODIFIED_SINCE": "If-Modified-Since",
"IF_MATCH": "If-Match",
"IF_NONE_MATCH": "If-None-Match",
"IF_RANGE": "If-Range",
"IF_UNMODIFIED_SINCE": "If-Unmodified-Since",
"LAST_MODIFIED": "Last-Modified",
"LOCATION": "Location",
"MAX_FORWARDS": "Max-Forwards",
"PRAGMA": "Pragma",
"PROXY_AUTHENTICATE": "Proxy-Authenticate",
"PROXY_AUTHORIZATION": "Proxy-Authorization",
"PUBLIC": "Public",
"RANGE": "Range",
"REFENER": "Refener",
"RETRY_AFTER": "Retry-After",
"SERVER": "Server",
"TRANSFER_ENCODING": "Transfer-Encoding",
"UPGRADE": "Upgrade",
"USER_AGENT": "User-Agent",
"VARY": "Vary",
"WARNING": "Warning",
"WWW_AUTHENTICATE": "WWW-Authenticate",
"XSRF_TOKEN": "X-XSRF-TOKEN"
}
Type:
- Object
(static, constant) HTTP_METHOD :Object
HTTP方法常量
基本说明
HTTP方法常量,目前支持:GET, POST, PUT, DELETE
四种,值是全小写,在程序执行过程中会去执行大写转换,现阶段针对HTTP方法的实现只包含业务场景最常见的四种,而不考虑其他的HTTP方法。
Type:
- Object
(static, constant) KEY_APP :String
Meta:应用配置
常量说明
import Ux from 'ux';
const storeKey = Ux.Env.KEY_APP;
多应用环境的当前应用的主键信息,对应后端 X_APP
表中的主键数据,该键值中的数据存储在 LocalStorage 中,当用户第一次打开登录页面,会访问应用程序接口提取应用程序相关配置,配置会走两部分:
- 公有应用配置数据:
/app/name/:name
访问(返回中不带有appKey
,只有appId
) - 私有应用配置数据:
/api/app/:key
访问(返回中带有appKey
)
存储了应用的全配置
Type:
- String
(static, constant) KEY_EVENT :String
Meta:Redux专用键名
基本说明
SessionStorage 专用的存储键值,存储 Redux 的事件专用信息,所有执行了 redux 的事件前缀都以环境变量中配置的
Z_K_EVENT
为前缀,不同的应用这个值应该不一致,主要用来实现多应用分流。当前前端中对 redux 的使用主要在整个
状态树的顶层,而兄弟节点的通讯走 redux 而不是走状态。
- 本组件内部使用props和state传递数据,包括数据继承。
- 跨组件之间传递数据则使用redux,目前最多应用于外层按钮和里层按钮的房重复提交同步操作。
Type:
- String
(static, constant) KEY_MDATA
Meta:调试存储键名
用来存储 Monitor
专用的调试信息,该信息会在 Monitor
中被使用。
(static, constant) KEY_USER :String
Meta:登录用户配置
基本说明
SessionStorage 专用的存储键值,存储当前用户登录信息,当用户点击了登录按钮过后,返回的用户登录数据会存储 在该键值中,里面存储的是用户数据的对象,其中最核心的字段如:
字段名 | 类型 | 说明 |
---|---|---|
key | String | 用户主键(标准) |
uniqueId | String | 用户全局唯一键(遗留系统专用) |
userId | String | Spring桥接专用,大部分系统都使用了userId作主键 |
Type:
- String
(static, constant) K_ARG :Object
特殊参数名
基本说明
该常量存储了 Zero Extension 的扩展框架中存在的核心参数名,这些参数名会用来做特殊读取和处理,且防止和其他参数名冲突。
参数调用 | 参数名 | 说明 |
---|---|---|
Ux.Env.K_ARG.PID |
pid | 页面ID,通常是菜单 X_MENU 的 KEY 列的值。 |
Ux.Env.K_ARG.MID |
mid | 模块ID,通常是模块表 X_MODULE 的 KEY 列的值。 |
Ux.Env.K_ARG.TID |
tid | 任务ID,工作流专用,对应到 X_TODO 的 KEY 列的值。 |
Ux.Env.K_ARG.AID |
aid | 应用ID,通常会对应到 X_APP 的 KEY 列的值。 |
Ux.Env.K_ARG.ID |
key | 主键专用。 |
Ux.Env.K_ARG.TARGET |
target | 目标页的URL地址,一般会做 Base64 编码,用于传递参数,当跳出应用回到环境时可指定上一个页面。 |
Ux.Env.K_ARG.QR |
* | 查询引擎专用的四个核心参数:pager, sorter, projection, criteria 。 |
Type:
- Object
(static, constant) K_NAME :Object
名称常量
基本说明
命名的基本规则有如下几种:
- 不带任何变量前缀的如:
Ux.Env.K_NAME.VISIBLE
,使用$
符号作为属性前缀,表示:$visible
。 - 下划线前缀变量如:
Ux.Env.K_NAME._PAGER
,表示纯属性,如:pager
。 $
符号前缀变量:AntD中的专用变量(旧版),如data-__meta
这种格式。
其中还存在一个特殊变量:Ux.Env.K_NAME.V_COLUMN
,和列表页中列相关的变量。
Type:
- Object
(static, constant) K_UI :Object
UI常量
基本说明
该常量仅用于界面相关元素 <hidden/>
的ID,用于做HTML中连接元素专用常量,目前包含:
常量名 | 常量值 | 说明 |
---|---|---|
Ux.Env.K_UI.PATTERN |
__PATTERN__ |
建模专用变量,描述标识规则选择器选择标识规则时的匹配模式。 |
Ux.Env.K_UI.ELE_HEADER |
__ELE_HEADER |
界面专用变量,描述界面中的头部元素,做顶部菜单处理的模式。 |
Ux.Env.K_UI.BTN_TREE_ON |
__BTN_TREE_ON |
树型展开用的隐藏变量 |
Ux.Env.K_UI.BTN_TREE_OFF |
__BTN_TREE_OFF |
树型收起用的隐藏变量 |
Ux.Env.K_UI.BTN_CLEAR_PREFIX |
__BTN_CLEAR_ |
单字段列过滤清空专用隐藏ID,可和某个字段连接。 |
Ux.Env.K_UI.BTN_CLEAR_SEARCH |
__BTN_CLEAR_SEARCH |
搜索框清空专用隐藏ID。 |
Ux.Env.K_UI.BTN_CLEAR_KEYWORD |
__BTN_CLEAR_KEYWORD |
清空关键字专用隐藏ID。 |
Type:
- Object
(static, constant) K_VALUE :Object
特殊值
基本说明
系统专用特殊值,等价变量为:
Ux.Env.VALUE
:描述的是业务值Ux.Env.CV_
:描述的是全局常量Ux.Env.K_VALUE
:描述的是系统值。
Type:
- Object
(static, constant) LANGUAGE :String
语言环境 Z_LANGUAGE
- 来源:
process.env.Z_LANGUAGE
自定义环境变量,您可以使用该环境变量读取前端程序配置的语言信息,语言变量的影响:
- 语言变量会影响读取资源文件的目录:
cab/<language>/
中读取前端静态资源文件。 - 语言变量会影响远程请求的
X-Lang
请求头,该请求头用于告诉服务端当前前端程序的语言环境。
凡牵涉多语言环境的地方都可以直接提取语言环境变量做语言相关判断。
Type:
- String
(static, constant) MIMES :Object
MIME常量
基本说明
系统常用的MIME值,用于设置Accept/Content-Type
等基础媒体类型值。目前系统中的值如下:
代码调用 | 值 | 说明 |
---|---|---|
Ux.Env.MIMES.JSON |
application/json | JSON媒体类型 |
Ux.Env.MIMES.MULTIPART |
multipart/form-data | (略) |
Ux.Env.MIMES.FORM |
application/x-www-form-urlencoded | (略) |
Ux.Env.MIMES.STREAM |
application/octet-stream | 二进制文件类型,上传下载用 |
您可以定义各种不同的支撑系统运行的
Type:
- Object
(static, constant) MOCK :Boolean
模拟环境(测试) Z_DEV_MOCK
- 来源:
process.env.Z_DEV_MOCK
基本说明
启用 Zero UI 中的模拟环境,该环境一旦启用,可执行纯前端开发模式,和远程相关的请求可直接使用 JS/Json
两种不同方式执行模拟。
- 模拟环境的数据目录通常为
app@mock
目录。 - 全局模拟参数依赖于
Z_DEV_MOCK
环境变量,单接口模拟参数依赖数据结构中的mock
属性。 - 模拟环境开启后可直接隔离后端实现前端独立开发,所有
ajax
前缀的请求都会直接被引导到模拟数据中。 - 除此之外,您还可以在模拟环境中使用 IndexedDB 来模拟数据库,这样可以实现前端的独立开发。
Mock规则
mock环境存储在src/mock
目录中,并且包含模拟环境的生成规则,构造 mockKey 的规则如下:
- 基本键值对应:
HTTP方法 + 下划线 + URI路径( / 转换成 _ )
。 - URI路径除了基本规则以外,
:id
和:key
可直接被还原,如/api/user/:key
的真实访问路径为/api/user/xxxxxxxxxx
,则可被还原成_api_user_:key
作为mockKey来使用。
Mock入口文件
mock入口文件如下:
export default {
// -------------------------------------------------- 全局
post_Login_user_login: 登录主接口,
post_api_user_logout: 注销主接口,
"post_Login_user_get-app-list": 读取主页菜单,
"post_Login_user_get-menu-list": 读取所有菜单,
get_api_tenant: 读取租户列表,
// ......
}
Mock数据结构
mock文件内部的数据结构如下:
export default {
mock: true,
processor: (
data = {}, // 「响应」对应 data 节点的数据,可以Object也可以Array
params // 「请求」对应当前请求数据
) => {
// 返回 Promise
},
data: [
]
}
参数 | 类型 | 说明 |
---|---|---|
mock | boolean | 是否单独开关当前mock环境,只有mock打开才生效,如果设置false,则请求不走Mock流程。 |
data | Object/Array | 模拟数据类型,可模拟成想要的数据类型做纯前端开发。 |
processor | Function | 函数类型,可以在data基础之上实现响应数据格式的初步转换。 |
Type:
- Boolean
(static, constant) MONITOR :Boolean
监控器参数 Z_DEV_MONITOR
- 来源:
process.env.Z_DEV_MONITOR
- 依赖:
process.env.Z_DEV_DEBUG
Zero UI中存在数据流监控器,配合 redux
实现针对交互过程的整体监控,该参数用于开启监控器,监控器的使用方式如下:
- 直接点击
Esc
按键可打开监控面板。 - 监控面板中会包括当前页面的所有数据流信息。
- 可用于监控props中的变量变化信息。
- 可用于监控state中的变量变化信息。
Type:
- Boolean
(static, constant) PAGE_APP
Meta:应用页键名
路由规划专用
基本说明
用于存储当前应用路由的菜单信息,内置存储了一个应用,意味着导航在同一个时间内只能待在单个应用中,当您点击进入到某个应用时会自动更新该值。该值存储在 SessionStorage 中,保证会话结束后该值就被清除了。
内部存储的值为:单个应用菜单主键。
(static, constant) PAGE_AT
Meta:所在页键名
路由规划专用
基本说明
存储了菜单主键,用于描述用户目前停留在哪个子页面,如果使用 F5
刷新时可以让浏览器自动路由到该页面中。
(static, constant) PAGE_HOME :String
Value:默认主界面
基本说明
默认值为 zero.desktop
,表示默认主界面为菜单中的工作台,位于系统统一规划的工作台应用。
Type:
- String
(static, constant) PAGE_MENU :String
Meta:菜单数据键名
路由规划专用
基本说明
防止应用重新加载菜单,在当前会话直接存储登录之后的所有菜单,减少远程读取菜单的开销。
Type:
- String
(static, constant) PAGE_OPEN :String
Meta:展开页键名
路由规划专用
基本说明
内置存储结构为 []
,内部存储了当前用户展开的所有菜单列表,F5
刷新时路由规划器会依旧维持展开菜单的基本状态。
Type:
- String
(static, constant) QR_COLUMN :Object
列过滤类型
基本说明
用于描述列过滤组件类型,现阶段只支持两种:
SEARCH
,搜索源,最终匹配LIKE
语法,构造字符包含字段信息,模糊匹配。DIRECT
,直接源,选择数据时构造IN
语法,精确项值。
该组件位于 AntD 的 <Table/>
中,构造的是列过滤器。
示例:src/zion/query.fn.qr.interact.element.js
columns.forEach(column => {
const field = column.dataIndex;
const filter = column[Cv.K_NAME.FILTER];
if (filter) {
$terms[field] = {};
$terms[field].type = filter.type ? filter.type : Cv.QR_COLUMN.DIRECT;
const {config = {}} = filter;
if (config.dataType) {
$terms[field].dataType = config.dataType;
} else {
// 默认的搜索模式
$terms[field].dataType = "STRING";
}
}
});
Type:
- Object
(static, constant) QR_SOURCE :Object
查询字段类型
基本说明
此类型和 Qr 查询引擎息息相关,用于描述查询字段详细类型,列过滤源主要包含如下:
INNER_SEARCH
,搜索源,最终匹配LIKE
语法,构造字符包含字段信息,模糊匹配。INNER_DIRECT
,直接源,选择数据时构造IN
语法,精确项值。OUTER
,外部源,外部源根据传入的操作符构造WHERE
语法。
核心点
- 非
OUTER
模式目前只支持三种数据类型- STRING:字符串
- NUMBER:数值
- BOOLEAN:布尔值
- 系统自动计算查询语法右值是否是一个
[]
格式。
示例:src/zion/query.__fn.qr.processor.js
const __qrField = (field, filterType = {}) => {
let normalized = {};
if (filterType.hasOwnProperty(field)) {
const config = filterType[field];
const type = config.type;
if (Cv.QR_COLUMN.SEARCH === type) {
normalized.field = `${field},c`;
normalized.type = Cv.QR_SOURCE.INNER_SEARCH;
normalized.isArray = false;
} else {
normalized.field = `${field},i`;
normalized.type = Cv.QR_SOURCE.INNER_DIRECT;
normalized.isArray = true;
}
normalized.dataType = config.dataType;
} else {
// 条件不存在于列过滤中
if (0 < field.indexOf(',')) {
// 本身带有操作符
normalized.field = field;
const op = field.split(',')[1];
normalized.isArray = ["i", "!i"].includes(op);
} else {
// 本身不带操作符,默认使用 Contains 条件
normalized.field = `${field},c`;
normalized.isArray = false;
}
normalized.type = Cv.QR_SOURCE.OUTER; // 外层组件传入
}
return normalized;
};
Type:
- Object
(static, constant) RUNTIME :Object
运行环境 NODE_ENV
- 来源:
process.env.NODE_ENV
运行时环境会对应到 node
中的标准环境变量 process.env.NODE_ENV
,该变量的值为 development
或 production
,编程过程中您可以直接使用 Ux.Env.RUNTIME
来获取系统当前配置的运行环境变量读取该值。
示例: /src/zone/v.environment.js
let result = RUNTIME.DEVELOPMENT === process.env.NODE_ENV;
keys.forEach(key => result = result && process.env[key] && "true" === process.env[key]);
return Boolean(result);
// -------------- 标准使用 ------------
// 上述代码是内部使用,若外部使用则应该如下:
// import Ux from 'ux';
// const runtime = Ux.Env.RUNTIME.DEVELOPMENT;
// 上边代码 runtime 的值是 "development";
Type:
- Object
(static, constant) SIGN :Boolean
开启数字签名 Z_SIGN
- 来源:
process.env.Z_SIGN
Zero UI 在启用后端扩展安全包中的接口时,可支持数字签名功能,前端包含了数字签名的基本算法可以实现针对参数的签名,最终和后端匹配完成 sig
参数的计算流程(现阶段的版本并未启用此功能,后期为了安全性考虑,会启用此功能)。
数字签名计算流程
- 先在系统中执行基础路径计算。
- 如果用户已经登录,则使用登录用户的账号 key 执行计算,未登录则使用时间戳。
- 然后解析所有的参数。
- 如果是 pager 参数,则使用
":index" + pager.index + "size" + pager.size
。 - 如果是 criterias 参数,则执行排序后追加参数
- 如果是 pager 参数,则使用
- 最后执行
HMAC-512
基础算法加密,带上超时的 10 分钟。
目前大部分应用并没使用数字签名功能,但后期可以考虑直接引入数字签名加强安全性。
Type:
- Boolean
(static, constant) SYNTAX_CLEAR :String
Syntax:清空语法
属性解析器中可操作的清空语法,此语法可以作为属性解析器的占位符。
Type:
- String
(static, constant) SYNTAX_KV :String
Syntax:键值语法
属性解析器中可直接解析成 key = value
结构专用的语法,此语法可以作为属性解析器的占位符。
Type:
- String
(static, constant) THEME :Object
App:色彩方案
基本说明
风格专用,用来配色,后缀的数值 _N
表示这种配色方案的颜色数量,您可以在任意场景使用配色数组,以实现配色的迭代调用和随机调用过程。
Type:
- Object
(static, constant) TYPE_CONTROL :Object
控件类型
基本说明
Zero UI 和后端扩展模块的 zero-ui
配合时,可实现纯数据驱动类型的组件,这些组件本身会遵循两层结构:
- Container:容器层,用于承载组件。
- Control:组件层,渲染核心组件,即此处的
FORM / LIST
类型。
此两种组件类型在后端对应不同的表结构,并且在配置数据解析流程中会搭载不同的解析器来执行配置标准化。
示例: src/utter/habit.fn.parser.action.js
const {type} = options;
if (Ux.Env.TYPE_CONTROL.LIST === type) {
const {ops = []} = options;
if (config.options) {
ops.forEach(op => {
const item = {};
item.key = op['clientKey'];
config.options[item.key] = op['text'];
});
}
} else if (Ux.Env.TYPE_CONTROL.FORM === type) {
const {ops = []} = options;
if (config.form) {
const op = {};
const event = {};
ops.forEach(each => {
// 先嫁接 op
op[each['clientKey']] = each['action'];
event[each['clientKey']] = {
event: each.event,
config: each.config ? each.config : {}
}; // 处理 event
});
config.form.op = op;
// event 专用信息
if (!Ux.isEmpty(event)) {
config.event = event;
}
}
}
return config;
Type:
- Object
(static, constant) TYPE_EVENT :Object
提交事件类型
基本说明
Zero UI本身可支持事件层面的无限扩展,提交事件描述了您的按钮中如何配置事件,目前支持的事件类型有:
事件类型 | 说明 |
---|---|
BACK | 返回专用事件 |
RESET | 重置专用事件 |
SUBMIT | 标准表单提交事件 |
SUBMIT_DIALOG | 对话框(模态窗)提交事件 |
SUBMIT_REDUX | 带 redux 数据流的提交事件 |
KEY | 仅包含主键数据的提交事件,如:删除、按ID读取数据 |
SAVE_ROW | 行保存提交事件,如表格编辑,或 DialogEditor 中的复杂行编辑 |
Zero UI 中的提交事件会直接绑定到统一函数签名的函数中实现 可配置,一旦进入配置流程,此处的事件就可直接使用数据驱动的方式来完成事件的触发流程,事件触发机制包括:
- (编程方式)直接使用编程方式触发事件,代码中直接操作。
- (配置方式)可使用静态配置和动态配置两种方式触发事件。
- (注入方式)直接从远程读取脚本内容实现事件触发(前端触发)。
- (脚本引擎)执行远程脚本引擎实现实现触发(后端触发)。
Type:
- Object
(static, constant) TYPE_JSX_NOTIFY :Object
错误提示类型
基本说明
Zero UI中,错误消息提示使用了浮游框的方式,但是浮游框提示为了防止交互过程中呈现太多冒泡错误信息界面,组件中只有焦点 onFocus 事件触发时才针对单个组件显示错误信息,而这种方式对 DialogEditor 这种没有焦点的组件将无法显示错误信息,因此,需要使用此变量定义哪些组件需要在失去焦点时显示错误信息。
示例:src/zest@web/form.equip.__.fn.raft.robin.js
if (cell.__render) {
const errorNotify = __CSS.cssNotify();
if (errorNotify.includes(cell.__render)) {
metadata.error_notify.push(cell.field);
}
}
// form.__.fn.css.uca.polymorphism.js
const cssNotify = () => __Zn.Env.TYPE_JSX_NOTIFY;
Type:
- Object
(static, constant) TYPE_JSX_RENDERS :Object
渲染器继承类型
基本说明
在某些特殊的场景下,交互式组件本身是 容器类型,在这种方式中,容器必须将 $renders
编程模式中的字段渲染器、列渲染器传递到容器类的组件里,这种场景下就需要执行额外的继承逻辑。
子组件中的渲染器主要来源于两个方面:
$renders
编程模式中的渲染器,直接继承。- 配置在Json静态文件中的渲染器(内置调用标准渲染器)。
示例:src/zodiac/antd4.__.@fn.v4.input.jsx.js
const cssRender = () => __Zn.Env.TYPE_JSX_RENDERS;
const __v4Renders = (optionJsx = {}, renders = {}, cell = {}) => {
const webComponents = cssRender();
// 追加一个条件,只针对 DialogEditor 之下以下流程
if (webComponents.includes(cell.render)) {
if (renders.hasOwnProperty(cell.field)) {
// renders 注入到 optionJsx 中,底层组件会自动读取
const $renders = renders[cell.field];
if (__Zn.isNotEmpty($renders)) {
optionJsx.$renders = $renders;
}
}
}
}
Type:
- Object
(static, constant) TYPE_JSX_VALIDATE :Object
验证组件修正类型
基本说明
验证组件修正类型是针对自定义组件触发验证的时间点进行修正,目前支持的修正类型有:
修正类型 | 说明 |
---|---|
onChange | 在组件触发 onChange 事件时触发验证 |
onBlur | 在组件失去焦点时触发 |
核心点
此属性是效果属性,主要用于提高交互的友好性,例如:在输入框中输入内容时,如果每输入一个字符就触发一次验证,那么会造成验证的频繁触发,因此,此时可以使用 onBlur
修正类型,当输入框失去焦点时触发验证,这样就可以避免频繁触发验证。
Zero UI 中默认使用了 onBlur 的方式触发验证,而对于部分复杂组件无法捕捉焦点信息,这种场景下,可以使用 onChange
修正类型,此时,验证会在组件触发 onChange
事件时触发,此变量定义了哪些自定义组件要开启 onChange
修正类型。
Type:
- Object
(static, constant) TYPE_LAZY_COLUMN :Object
延迟列类型
基本说明
延迟列类型主要用于列渲染中包含了异步渲染流程的自定义组件,该组件需要在渲染时进行异步加载,因此需要在渲染时进行特殊处理。它的值有2种:
USER
:旧值LAZY
:新值
这两个值的内置逻辑是没有任何区别的,而
LAZY
的语义性更强,旧值是因为最早使用 Zero UI 中已经包含了配置相关定义,基于这个出发点,将其保留下来。
Type:
- Object
(static, constant) TYPE_ON :Object
Event类型
基本说明
Event类型是为界面组件量身打造的类型,它可以和 HTML 的原生事件类型执行绑定,防止开发人员在书写时出现拼写错误而量身打造,现阶段支持的类型如下:
类型 | 说明 |
---|---|
onChange |
用于表单组件,当表单组件值发生变化时触发 |
onSelect |
用于下拉组件,当下拉组件值发生变化时触发 |
onChecked |
用于复选框组件,当复选框组件值发生变化时触发 |
示例:src/zodiac/antd4.__.@fn.v4.input.event.js
const {
reference,
cell,
event = __Zn.Env.TYPE_ON.ON_CHANGE,
} = configuration;
Type:
- Object
(static, constant) TYPE_OP :Object
操作类型
基本说明
操作类型同为 Zero 扩展模块中数据驱动的核心,它包含了三种:
- OP:静态执行专用,通常:前端 -> 后端调用,identifier
- ATOM:动态执行,一般访问 UI_OP,control
- FLOW:工作流专用
不同的操作类型构造的请求数据格式不同,但最终提取的标准化操作格式是一致的,它的标准化请求如下:
// type = OP
{
"identifier": "xxx,模型统一标识符,用于读取 Master 模型操作"
}
// type = ATOM
{
"control": "xxx,对应后端组件 UI_CONTROL 的主键ID"
}
// type = FLOW
{
"workflow": "工作流在Camunda中的 definitionKey",
"node": "工作流节点名称,event / task"
}
示例:src/utter/channel.cm.fn.yi.container.atom.js
const ajaxOp = I.ops({control, type: Ux.Env.TYPE_OP.ATOM});
Type:
- Object
(static, constant) TYPE_UPLOAD :Object
上传组件类型
基本说明
上传组件类型直接对应到 Ant Design 中的 Upload 组件,它包含两种类型:
picture-card
:图片上传模式和卡片模式。text
:文本上传模式。
(略)
Type:
- Object
(static, constant) X_APP_ID :String
Meta:应用ID
基本说明
import Ux from 'ux';
const storeKey = Ux.Env.X_APP_ID;
LocalStorage中用于存储应用ID的键名,该键名存储的是应用的主键信息,对应后端 X_APP
表中的主键数据。
Type:
- String
(static, constant) X_APP_KEY :String
Meta:应用加密ID
import Ux from 'ux';
const storeKey = Ux.Env.X_APP_KEY;
LocalStorage 中应用加密ID的键名,该键名中存储的是应用加密主键信息(64位随机字符串),对应后端 X_APP
表中的 APP_KEY
字段中存储的值,可使用 storeKey
去提取该值。
Type:
- String
(static, constant) X_HEADER :Object
Meta:标准请求头名
基本说明
该变量同样会包含类似 X_
的一系列名称,但它对应的值是标准的请求头名称,整体的映射表如下:
变量名 | 请求头 | 存储键 | 存储位置 | 存储内容 |
---|---|---|---|---|
Ux.Env.X_HEADER.X_APP_ID |
X-App-Id |
Ux.Env.X_APP_ID |
LocalStorage | 应用主键 |
Ux.Env.X_HEADER.X_APP_KEY |
X-App-Key |
Ux.Env.X_APP_KEY |
LocalStorage | 应用加密主键 |
Ux.Env.X_HEADER.X_SIGMA |
X-Sigma |
Ux.Env.X_SIGMA |
LocalStorage | 统一标识符 |
Ux.Env.X_HEADER.X_LANG |
X-Lang |
Ux.Env.X_LANG |
LocalStorage | 语言信息 |
x | x | Ux.Env.KEY_APP |
LocalStorage | 完整应用配置数据 |
Ux.Env.X_HEADER.X_SESSION |
X-Session |
Ux.Env.X_SESSION |
SessionStorage | 会话信息 |
x | x | Ux.Env.KEY_USER |
SessionStorage | 完整用户配置数据 |
x | x | Ux.Env.KEY_EVENT |
SessionStorage | Redux 专用桥接的键名 |
2. 请求头说明
X-App-Id
:应用主键,对应X_APP
中的KEY
值。X-App-Key
:应用加密主键,对应X_APP
中的APP_KEY
值。X-Sigma
:统一标识符,对应X_APP
中的SIGMA
值。X-Lang
:语言信息,对应X_APP
中的LANGUAGE
值。X-Tenant-Id
:租户信息,对应后端的云端租户结构。
现阶段版本还没打开多租户模式,所以该请求头暂时不开放使用,此处主要是针对后期的扩展保留,做云原生应用时会用到,而此API牵涉的所有教程并非是
X_HEADER
变量,而是完整的X_
和KEY_
两种变量所需的内容。
Type:
- Object
(static, constant) X_HEADER_SUPPORT :Boolean
自定义请求头 Z_X_HEADER_SUPPORT
- 来源:
process.env.Z_X_HEADER_SUPPORT
基本介绍
是否开启自定义请求头的功能,开启之后以下几个请求头会被自动添加到所有请求中:
X-Lang
:Zero UI的语言信息,追加Z_LANGUAGE
中的语言信息到请求头中。X-App-Id / X-App-Key
:应用的ID和Key,非敏感数据环境和敏感数据环境的应用基础信息。X-Sigma
:统一标识符的变体,用作容器标识。X-Tenant-Id
:租户标识请求头,用于标识当前容器环境中运行的租户。
Zero UI本身是支持 多租户、多语言、多应用 环境的,而请求本身是直接从自定义请求头开始就直接支持这些功能,因此您可以在此处开启自定义请求头的功能,从而实现多租户、多语言、多应用的功能。
常用自定义头
X 系列的头部专用信息,用于处理 X 系列的核心头部信息,参考下表
变量值 | Http请求头 | 说明 |
---|---|---|
X_APP_KEY |
X-App-Key | 多应用环境处理敏感信息的应用键专用。 |
X_APP_ID |
X-App-Id | 多应用环境处理普通信息的应用键值专用(带业务)。 |
X_SIGMA |
X-Sigma | 平台应用标识符,也称为统一标识符,在多应用环境中用于标识应用(不带业务)。 |
X_LANG |
X-Lang | 多语言平台的语言值(头文件识别)。 |
X_TENANT_ID |
X-Tenant-Id | 租户标识符,用于标识当前租户。 |
Type:
- Boolean
(static, constant) X_LANG :String
Meta:运行语言
基本说明
多语言模式下的定义的从 LocalStorage 中提取语言信息的专用键。
import Ux from 'ux';
const storeKey = Ux.Env.X_LANG;
2. 提取流程
- 直接调用
Ux.Env.X_LANG
读取语言存储的键 key。 - 根据
key
到 LocalStorage 中去读取当前应用的语言信息。
X_LANG
是元数据,并非存储的数据。
Type:
- String
(static, constant) X_SESSION :String
Meta:登录会话键名
基本说明
用于存储当前登录账号使用的会话ID专用的键名,和后端的会话执行绑定:
- 基础会话ID,对应到
vertx.web.session
中的服务端会话ID。 - 登录专用 habitus,Zero Extension 框架中的登录专用会话ID。
Type:
- String
(static, constant) X_SIGMA :String
Meta:统一标识键名
import Ux from 'ux';
const storeKey = Ux.Env.X_SIGMA;
LocalStorage 中用于提取统一标识符的键名,该键名中存储的是统一标识符,对应后端 X_APP
表中的 SIGMA
字段中存储的值,可使用 storeKey
去提取该值,而且会转换成 X-Sigma
的请求头等信息。
Type:
- String