constant/zone

Zone 底座:常量定义

使用

import Ux from 'ux';

const value = Ux.Env.xxx;

常量分类

  1. 系统变量:配置在 开发生产 中的系统环境变量。
  2. 调试变量:配置在环境变量文件中以 Z_DEV 开头的变量。
  3. 类型常量:直接定义的用于类型定义的常量,部分类型常量和业务组件相关。

核心点:

  • 没有在API文档中追加注释的环境变量您可以直接从云端白皮书中查看。
  • 和环境变量相关的常量您可以直接在标题中看到环境变量名,左侧目录中是 Ux.Env.XXX 中的 XXX 部分,针对环境变量的常量引用不考虑 Z_ 前缀。
  • Meta 前缀的变量存储的都是名称元数据,您可以使用该名称从浏览器中的 SessionStorageLocalStorage 中直接提取对应键值中包含的数据。
  • Value 前缀的变量为全局值,Zero UI扩展框架中的核心值相关信息。

Members

(static, constant) (?ENV)

(ENV) 标准环境变量

标准环境变量教程可参考:5.1.3.环境变量

环境变量文件

环境变量文件位于根目录之下,从 .env.development.tpl 文件拷贝而来,若您下载的是最新的脚手架,内部会包含环境变量模板文件,直接拷贝即可。

  1. .env.development:开发环境环境变量文件。
  2. .env.production:生产环境环境变量文件。

核心点

  • 所有自定义的环境变量在文件中都带有 Z_ 前缀。
  • 使用 Ux.Env 引用环境变量时,不需要 Z_ 前缀,直接去掉 Z_ 即可引用。
  • 有两个核心变量是关乎前后端的
    • Z_ROUTE:前端路由内容路径前缀,不同应用其前缀有所区别,通常绑定 应用租户
    • Z_ENDPOINT:后端服务端点前缀,访问不同接口时会有所区别。
  • 所有样式相关的环境变量都带有 Z_CSS 前缀。
  • 登录会话(当前账号)类的变量都带有 Z_K 前缀,且扩展出来后都会带上当前账号ID做合并计算。

(static, constant) CHANGE :Object

变更模式

基本说明

变更模式主要用于变更记录、数据比对、以及操作反射等综合性场景,现阶段支持的变更模式主要包括:

  1. ADD:新增
  2. REPLACE:更新/替换
  3. APPEND:更新/追加
  4. DELETE:删除

追加和替换单独拎出来作为变更的两种扩展模式,在传统系统中默认使用的是替换的更新模式,而此处有追加之后您的变更模式就会潜移默化发生该变。

模式的细分主要是为了处理多种场景:

  1. 输入属性的清空操作,在 Zero UI 中,系统采用了 JavaScript 中的两个特殊值:
    • undefined:表示属性不存在,此时系统会认为该属性不执行任何操作,跳过变更。
    • null:表示属性存在,但值为空,此时系统会认为该属性执行删除操作(清空)。
  2. 追加操作,追加操作主要用于特定对象的合并,默认值 + 更新值,可实现:
    • 更新值优先: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的请求信息:

  1. 请求详细信息,包括请求头、请求体。
  2. 响应详细信息,包括响应头、响应体。
  3. 数字签名相关信息。
  4. 应用相关自定义头相关信息。
  5. Qr 查询引擎请求信息。
Type:
  • Boolean

(static, constant) DEBUG_DEV :Boolean

全局调试参数(开发)Z_DEBUG_DEV

  • 来源:process.env.Z_DEV_DEBUG / process.env.NODE_ENV

启用 Zero UI 框架中的调试参数以及 NodeJS 原生环境来控制调试信息,调试信息只有在如下条件满足时可触发:

  1. NodeJS原生环境:NODE_ENV=development 开发环境才触发。
  2. ZeroUI环境:Z_DEV_DEBUG=true 打开调试模式才可。
Type:
  • Boolean

(static, constant) DEBUG_FORM :Boolean

表单渲染器调试参数 Z_DEV_FORM

  • 来源:process.env.Z_DEV_FORM

新版表单日志是中文,表单渲染器主要包含如下日志信息:

  1. 表单基本布局信息。
  2. 表单行额外配置信息。
  3. 表单单元格中的 optionItemoptionJsx 相关信息。
  4. 表单初始化数据信息。
  5. 提交和加载流程中的表单数据信息。
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 中,当用户第一次打开登录页面,会访问应用程序接口提取应用程序相关配置,配置会走两部分:

  1. 公有应用配置数据:/app/name/:name 访问(返回中不带有 appKey,只有 appId
  2. 私有应用配置数据:/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_MENUKEY 列的值。
Ux.Env.K_ARG.MID mid 模块ID,通常是模块表 X_MODULEKEY 列的值。
Ux.Env.K_ARG.TID tid 任务ID,工作流专用,对应到 X_TODOKEY 列的值。
Ux.Env.K_ARG.AID aid 应用ID,通常会对应到 X_APPKEY 列的值。
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

自定义环境变量,您可以使用该环境变量读取前端程序配置的语言信息,语言变量的影响:

  1. 语言变量会影响读取资源文件的目录:cab/<language>/ 中读取前端静态资源文件。
  2. 语言变量会影响远程请求的 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 两种不同方式执行模拟。

  1. 模拟环境的数据目录通常为 app@mock 目录。
  2. 全局模拟参数依赖于 Z_DEV_MOCK 环境变量,单接口模拟参数依赖数据结构中的 mock 属性。
  3. 模拟环境开启后可直接隔离后端实现前端独立开发,所有 ajax 前缀的请求都会直接被引导到模拟数据中。
  4. 除此之外,您还可以在模拟环境中使用 IndexedDB 来模拟数据库,这样可以实现前端的独立开发。

Mock规则

mock环境存储在src/mock目录中,并且包含模拟环境的生成规则,构造 mockKey 的规则如下:

  1. 基本键值对应:HTTP方法 + 下划线 + URI路径( / 转换成 _ )
  2. 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 实现针对交互过程的整体监控,该参数用于开启监控器,监控器的使用方式如下:

  1. 直接点击 Esc 按键可打开监控面板。
  2. 监控面板中会包括当前页面的所有数据流信息。
  3. 可用于监控props中的变量变化信息。
  4. 可用于监控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

列过滤类型

基本说明

用于描述列过滤组件类型,现阶段只支持两种:

  1. SEARCH,搜索源,最终匹配 LIKE 语法,构造字符包含字段信息,模糊匹配。
  2. 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 查询引擎息息相关,用于描述查询字段详细类型,列过滤源主要包含如下:

  1. INNER_SEARCH,搜索源,最终匹配 LIKE 语法,构造字符包含字段信息,模糊匹配。
  2. INNER_DIRECT,直接源,选择数据时构造 IN 语法,精确项值。
  3. OUTER,外部源,外部源根据传入的操作符构造 WHERE 语法。

核心点

  1. OUTER 模式目前只支持三种数据类型
    • STRING:字符串
    • NUMBER:数值
    • BOOLEAN:布尔值
  2. 系统自动计算查询语法右值是否是一个 [] 格式。

示例: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,该变量的值为 developmentproduction,编程过程中您可以直接使用 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 参数的计算流程(现阶段的版本并未启用此功能,后期为了安全性考虑,会启用此功能)。

数字签名计算流程

  1. 先在系统中执行基础路径计算。
  2. 如果用户已经登录,则使用登录用户的账号 key 执行计算,未登录则使用时间戳。
  3. 然后解析所有的参数。
    1. 如果是 pager 参数,则使用":index" + pager.index + "size" + pager.size
    2. 如果是 criterias 参数,则执行排序后追加参数
  4. 最后执行 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 配合时,可实现纯数据驱动类型的组件,这些组件本身会遵循两层结构:

  1. Container:容器层,用于承载组件。
  2. 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 中的提交事件会直接绑定到统一函数签名的函数中实现 可配置,一旦进入配置流程,此处的事件就可直接使用数据驱动的方式来完成事件的触发流程,事件触发机制包括:

  1. (编程方式)直接使用编程方式触发事件,代码中直接操作。
  2. (配置方式)可使用静态配置和动态配置两种方式触发事件。
  3. (注入方式)直接从远程读取脚本内容实现事件触发(前端触发)。
  4. (脚本引擎)执行远程脚本引擎实现实现触发(后端触发)。
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 编程模式中的字段渲染器、列渲染器传递到容器类的组件里,这种场景下就需要执行额外的继承逻辑。

子组件中的渲染器主要来源于两个方面:

  1. $renders 编程模式中的渲染器,直接继承。
  2. 配置在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 扩展模块中数据驱动的核心,它包含了三种:

  1. OP:静态执行专用,通常:前端 -> 后端调用,identifier
  2. ATOM:动态执行,一般访问 UI_OP,control
  3. 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 组件,它包含两种类型:

  1. picture-card:图片上传模式和卡片模式。
  2. 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

基本介绍

是否开启自定义请求头的功能,开启之后以下几个请求头会被自动添加到所有请求中:

  1. X-Lang:Zero UI的语言信息,追加 Z_LANGUAGE 中的语言信息到请求头中。
  2. X-App-Id / X-App-Key:应用的ID和Key,非敏感数据环境和敏感数据环境的应用基础信息。
  3. X-Sigma:统一标识符的变体,用作容器标识。
  4. 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. 提取流程

  1. 直接调用 Ux.Env.X_LANG 读取语言存储的键 key。
  2. 根据 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