ZERL 云原生全栈技术框架开发指南

简介

一条来自 MVVM 江湖的传说：

武林至尊，宝刀 React

Vue 不出，谁与争锋。

天下武功，无坚不摧，唯 Solid 不破。

什么是 ZERL ？

ZERL 是基于 Solid.js MVVM 框架打造的全栈技术开发框架。
ZERL 全面采用 Typescript 进行开发，Typescript 能提供更良好的协作体验，提供实时的代码校验，实现更高质量的交付。
ZERL 将更深层次地诠释全栈技术。全栈，一般定义是对工程师技术能力的泛指。是一个组织开发成本控制的有效手段。因此全栈是个人能力的追求，也是组织发展的需要。

ZERL 对全栈实现作出了以下的尝试：

保留了 MVVM 框架的优势，并非只是实现了 SSR
实现了技术栈的统一，而非简单的语言统一或交互标准统一
提供了简便的工程构建和发布部署工具包
构建了云原生开发模式，客户端可直接导入服务端模块并在客户端使用，无需实现 api

开始使用

创建应用

$ npx zerli@latest create zerlapp
或
$ npx zerli@latest -c zerlapp

开发

运行开发环境

$ cd zerlapp
$ npx zerli@latest
或
$ npm run dev

UI 模块开发

规范

UI 模块运行于浏览器上，开发规范及安全性要求须符合 W3C 标准。

ZERL 所有 UI 组件构建于 solid.js 的 MVVM 框架之上，zerl 的所有组件完全兼容 solid.js 所提供的 API。了解 solid.js API 请前往solidjs.com

UI 模块 API

// 导入ZERL API
import { Button } from 'zerl'

// 导入SolidJS API
import { createSignal, createMemo } from 'zerl'

服务模块开发

规范

服务模块运行于服务容器内，负责数据的存储与处理。服务模块使用 Node.JS 为运行时核心，因此可调用 Node.JS 的一切接口。了解 Node.JS API 前往nodejs.org。

服务模块由逻辑组件和任务组件构成。

逻辑组件实现与 UI 组件或其他客户端进行数据通信，文件命名规则为：[组件名称].mod.ts。

任务组件在应用启动时触运行，可用于数据初始化、定时任务或启动自定义实例等场景应用，文件命名规则为：[组件名称].job.ts。

服务模块 API

// 导入ZERL API
import { Expose } from 'zerl'

封装

$ npx zerli build@latest
或
$ npm run build

运行 Build 命令后根据运行需求选择相应提示的封装选项即可，封装后把生成的运行文件上传到服务器，直接运行即可。
支持 x64 与 arm64 架构的运行文件封装，不支持交叉编译。生成 x64 运行文件须在 x64cpu 的计算机上进行封装，生成 arm64 运行文件须在 arm64cpu 的计算机上进行封装。

部署

Linux 部署环境下实现非阻塞式启动

使用 vi/vim/nano 或其他编辑工具创建 run.sh 文件
粘贴以下内容并修改应用程序名称进行保存
运行./run.sh 即可

log="`date +%Y%m%d%H%M%S`.log"
killall zerlapp*
nohup ./zerlapp-linux > $log 2& > &1 &

Docker

应用在封装时，自动检测有否安装 docker，如有安装则会出现 docker 生成镜像的选项，打包后会在本地生成 docker 镜像。

配置

在工程目录(src)内创建工程配置文件（非必要），命名为 application.yml
配置文格式如下:

# app名称
name: your_app_name
# 程序源码目录
root: ./src
# 服务端口
port: 8080
# MySQL数据库连接设置
mysql:
  ### 最大连接数
  connectionLimit: 200
  ### 数据库地址
  host: localhost
  ### 数据库访问端口
  port: 3306
  ### 数据库登录用户名
  user: root
  ### 数据库登录密码
  password: '123456'
  ### 数据库名称
  database: mysql
# Redis连接设置
redis:
  ## 数据库地址
  host: localhost
  ## 数据库访问端口
  port: 6379
  ## 数据库登录密码
  password: '123456'

UI 组件

布局

导入组件

import { Col, Row, Line } from 'zerl'

水平布局组件（Row）

左上角对齐

<Row>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

左对齐垂直居中

<Row middle class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

左下角对齐

<Row bottom class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

完全居中

<Row center class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

靠顶部水平居中

<Row top center class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

靠底部水平居中

<Row bottom center class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

右上角对齐

<Row right class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

右对齐垂直居中

<Row right middle class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

右下角对齐

<Row right bottom class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Row>

属性说明

名称	属性	描述
middle	Boolean	设置布局垂直居中
top	Boolean	设置布局顶部对齐
bottom	Boolean	设置布局底部对齐
center	Boolean	设置布局水平居中
right	Boolean	设置布局靠右对齐
class	String	设置布局样式模块
style	String/CSS Object	设置布局样式

垂直布局组件（Col）

左上角对齐

<Col class='fill' style={{ 'min-height': '300px' }}>
	<div class={styles.block} style={{ width: '50px' }}></div>
	<div class={styles.block} style={{ width: '100px' }}></div>
	<div class={styles.block} style={{ width: '150px' }}></div>
</Col>

靠左居中

<Col middle class='fill' style={{ 'min-height': '300px' }}>
	<div class={styles.block} style={{ width: '50px' }}></div>
	<div class={styles.block} style={{ width: '100px' }}></div>
	<div class={styles.block} style={{ width: '150px' }}></div>
</Col>

左下角对齐

<Col bottom class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Col>

完全居中

<Col center class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Col>

靠顶部水平居中

<Col top center class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Col>

靠底部水平居中

<Col bottom center class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Col>

右上角对齐

<Col right class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Col>

右对齐垂直居中

<Col right middle class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Col>

右下角对齐

<Col right bottom class='fill'>
	<div class={styles.block} style={{ height: '50px' }}></div>
	<div class={styles.block} style={{ height: '100px' }}></div>
	<div class={styles.block} style={{ height: '150px' }}></div>
</Col>

属性说明

名称	属性	描述
middle	Boolean	设置布局垂直居中
top	Boolean	设置布局顶部对齐
bottom	Boolean	设置布局底部对齐
center	Boolean	设置布局水平居中
right	Boolean	设置布局靠右对齐
class	String	设置布局样式模块
style	String/CSS对象	设置布局样式

分割线

水平分割线

<Line style={{ width: '400px' }} />

垂直分割线

<Line vertical style={{ height: '50px' }} />

属性说明

名称	属性	描述
vertical	Boolean	设置为垂直分割线
class	String	设置分割线样式模块
style	String/CSS对象	设置分割线样式

路由

导入组件

import { Route, Navigate } from 'zerl'
import Home from './page/home.tsx'

视图加载

同步加载

<div class="main">
  <Route default="/home" routers={import.meta.globEager("./pages/**/*.tsx")}/>
</div>

异步加载

<div class="main">
  <Route default="/home" routers={import.meta.glob("./pages/**/*.tsx")}/>
</div>

自定义加载

<div class="main">
  <Route routers={{"/": Home,"/about": () => lazy(import("./pages/about.tsx"))}}/>
</div>

属性说明

名称	属性	描述
default	String	设置默认路由页面路径，路径为"/"时会跳转到该页面
routers	Object	采用import.meta.glob方式导入所有路由页面对象

按钮

导入组件

import { Button } from 'zerl'

普通按钮

<Button>普通按钮</Button>

缩小设置

小号

<Button mini>小号按钮</Button>

超小号

<Button tiny>超小号按钮</Button>

状态设置

成功状态

<Button success>成功状态</Button>
<Button success mini>成功状态</Button>
<Button success tiny>成功状态</Button>

警告状态

<Button warning>警告状态</Button>
<Button warning mini>警告状态</Button>
<Button warning tiny>警告状态</Button>

危险状态

<Button danger>危险状态</Button>
<Button danger mini>危险状态</Button>
<Button danger tiny>危险状态</Button>

信息状态

<Button info>信息状态</Button>
<Button info mini>信息状态</Button>
<Button info tiny>信息状态</Button>

简单状态

<Button simple>简单状态</Button>
<Button simple mini>简单状态</Button>
<Button simple tiny>简单状态</Button>

形状设置

圆角

<Button rounded>圆角按钮</Button>
<Button rounded mini>圆角按钮</Button>
<Button rounded tiny>圆角按钮</Button>

圆形

<Button circle>圆</Button>
<Button circle mini>圆</Button>
<Button circle tiny>圆</Button>

方形

<Button square>方</Button>
<Button square mini>方</Button>
<Button square tiny>方</Button>

明亮模式

<Button lighten>明亮模式</Button>
<Button lighten success>明亮模式</Button>
<Button lighten warning>明亮模式</Button>
<Button lighten danger>明亮模式</Button>
<Button lighten info>明亮模式</Button>

属性说明

分类	名称	属性	描述
缩小	mini	Boolean	按钮缩小为小号
缩小	tiny	Boolean	按钮缩小为超小号
状态	success	Boolean	按钮设置为成功状态
状态	warning	Boolean	按钮设置为警告状态
状态	danger	Boolean	按钮设置为危险状态
状态	info	Boolean	按钮设置为信息状态
状态	simple	Boolean	按钮设置为简单状态
形状	rounded	Boolean	按钮设置为圆角形状
形状	circle	Boolean	按钮设置为圆形
形状	square	Boolean	按钮设置为方形
模式	lighten	Boolean	按钮设置为明亮模式
样式	style	String或CSS对象	设置按钮样式
样式	class	String	设置按钮样式模块
事件	onClick	Function	按钮点击事件，function(e){...}，e为当前按钮点击事件对象

单选

导入组件

import { createSignal, createMemo, Button, Option } from 'zerl'

定义变量

const [getRadioValue1, setRadioValue1] = createSignal(0)
const [getRadioValue2, setRadioValue2] = createSignal(1)
const getRadioValue3 = createMemo(() => 2)

水平排列

<Button name='radio1' type='radio' value={getRadioValue1()} onChange={value => setRadioValue1(value)}>
  <Option name='优秀' value={0} />
  <Option name='良好' value={1} />
  <Option name='一般' value={2} />
  <Option name='差' value={3} />
</Button>

垂直排列

<Button name='radio2' vertical type='radio' value={getRadioValue2()} onChange={value => setRadioValue2(value)}>
  <Option name='优秀' value={0} />
  <Option name='良好' value={1} />
  <Option name='一般' value={2} />
  <Option name='差' value={3} />
</Button>

只读模式

<Button readonly name='radio3' type='radio' value={getRadioValue3()}>
  <Option name='优秀' value={0} />
  <Option name='良好' value={1} />
  <Option name='一般' value={2} />
  <Option name='差' value={3} />
</Button>

属性说明

组件	名称	属性	描述
Button	name	String	设置单选按钮名称
Button	type	String	设置按钮类型，type="radio"为单选按钮
Button	value	Number/String	设置按钮当前选项的值
Button	readonly	Boolean	把单选按钮设置为只读状态
Button	vertical	Boolean	把单选按钮设置为纵向排列模式
Button	onChange	Function	选择内容时触发的事件，function(e){...}，e为当前选择项的值信息，类型为Number/String
Option	name	String	设置单选按钮选项的显示名称
Option	value	Number/String	设置单选按钮选项的值

多选

导入组件

import { createSignal, createMemo, Button, Option } from 'zerl'

定义变量

const [getCheckValue1, setCheckValue1] = createSignal([0])
const [getCheckValue2, setCheckValue2] = createSignal([1])
const getCheckValue3 = createMemo(() => [0, 2])

水平排列

<Button name='check1' type='check' value={getCheckValue1()} onChange={value => setCheckValue1(value)}>
  <Option name='优秀' value={0} />
  <Option name='良好' value={1} />
  <Option name='一般' value={2} />
  <Option name='差' value={3} />
</Button>

垂直排列

<Button name='check2' vertical type='check' value={getCheckValue2()} onChange={value => setCheckValue2(value)}>
  <Option name='优秀' value={0} />
  <Option name='良好' value={1} />
  <Option name='一般' value={2} />
  <Option name='差' value={3} />
</Button>

只读模式

<Button readonly name='check3' type='check' value={getCheckValue3()}>
  <Option name='优秀' value={0} />
  <Option name='良好' value={1} />
  <Option name='一般' value={2} />
  <Option name='差' value={3} />
</Button>

属性说明

组件	名称	属性	描述
Button	name	String	设置单选按钮名称
Button	type	String	设置按钮类型，type="check"为单选按钮
Button	value	Number[]/String[]	设置按钮当前选项的值
Button	readonly	Boolean	把多选按钮设置为只读状态
Button	vertical	Boolean	把多选按钮设置为纵向排列模式
Button	onChange	Function	选择内容时触发的事件，function(e){...}，e为当前选择项的值信息，类型为Number[]/String[]
Option	name	String	设置多选按钮选项的显示名称
Option	value	Number/String	设置多选按钮选项的值

提示

导入组件

import { Alert } from 'zerl'

简单的提示

Alert('这是一个提示')

提示样式

Alert('这是一个成功样式的提示', { type: 'success' })

Alert('这是一个警告样式的提示', { type: 'warning' })

Alert('这是一个危险样式的提示', { type: 'danger' })

Alert('这是一个信息样式的提示', { type: 'info' })

提示方向

Alert('这是一个上方弹出的提示', { direction: 'ttb' })

Alert('这是一个下方弹出的提示', { direction: 'btt' })

Alert('这是一个右上方弹出的提示', { direction: 'rttl' })

Alert('这是一个右下方弹出的提示', { direction: 'rbtt' })

自动关闭

Alert('这是一个自动关闭的提示', { delay: 2 })

深色模式

Alert('这是一个深色模式的提示', { mode: 'darken' })

参数说明

名称	属性	描述
message	String/JSX.Element	展示的消息内容，可以是文本消息内容/组件消息内容
options	选项参数	设置消息提示选项参数

options 参数说明

名称	属性	描述
type	String	消息提示样式，可选值为：default-默认样式，success-成功样式，warning-警告样式，danger-危险样式，info-信息样式，默认为default
mode	String	消息显示模式，可选值为：lighten-浅色模式，darken-深色模式，默认为lighten
diretion	String	消息弹出方向，可选值为：ttb-上方弹出，btt-下方弹出，rttl-右上方弹出，rbtt-右下方弹出，默认为ttb
delay	Number	消息展示时间，单位：秒，不设置时消息需要手动关闭

确认

导入组件

import { Confirm } from 'zerl'

组件使用

async function() {
	const res = await Confirm('确认提醒信息', () => (
		<div>
			<h3>提示信息</h3>
			<span>这是一条提示信息</span>
		</div>
	))
}

参数说明

名称	属性	描述
title	String/JSX.Element	提示信息标题
content	String/JSX.Element	提示信息内容

返回值说明

名称	属性	描述
result	Promise(Boolean)	点击确认返回true，点击取消返回false

输入

导入组件

import { createSignal, createMemo, Text } from 'zerl'

定义变量

const [getInputValue, setInputValue] = createSignal('')
const [getDateValue, setDateValue] = createSignal(new Date())
const [getDateRangeValue, setDateRangeValue] = createSignal([])
const getValue = createMemo(() => 'readonly')

普通输入框

<Text placeholder='这是一个普通的输入框' value={getInputValue1()} onInput={e => setInputValue(e)} />

数字输入

<Text type='digit' placeholder='这是一个只能输入数字的输入框' value={getInputValue()} onInput={e => setInputValue(e)} />

密码输入

<Text type='password' placeholder='这是一个密码输入框'value={getInputValue()} onInput={e => setInputValue(e)}/>

只读模式

<Text readonly value={getValue()} />

多行输入

多行输入框

<Text type='multi' placeholder='这是一个普通的多行输入框' value={getInputValue()} onInput={e => setInputValue(e)}/>

设置行数

<Text type='multi' rows={10} placeholder='这是一个设置高度为10行的多行输入框' value={getInputValue()} onInput={e => setInputValue(e)}/>

富文本编辑器

<Text type='rich' value={getInputValue()} onInput={e => setInputValue(e)} placeholder='这是一个富文本编辑器' style={{ height: '300px' }}/>

日期时间输入

日期输入框

<Text type='date' placeholder='这是一个日期组件' value={getDateValue()} onInput={e => setDateValue(new Date(e))}/>

日期范围输入框

<Text type='daterange' placeholder='这是一个日期范围组件' value={getDateRangeValue()} onInput={([a, b]) => setDateRangeValue([new Date(a), b ? new Date(b) : null])}/>

时间输入框

<Text type='time' placeholder='这是一个时间组件' value={getDateValue()} onInput={e => setDateValue(new Date(e))}/>

日期时间输入框

<Text type='datetime'placeholder='这是一个日期时间组件' value={getDateValue9()} onInput={e => setDateValue(new Date(e))}/>

日期时间范围输入框

<Text type='datetimerange' placeholder='这是一个日期时间范围组件' value={getDateRangeValue()} onInput={([a, b]) => setDateRangeValue([new Date(a), b ? new Date(b) : null])}/>

属性说明

名称	属性	描述
type	String	设置输入组件类型。"text"：文本输入框；"password"：密码输入框；"digit"：数字输入框；multi：为多行文本框；"date"：日期输入框；"datetime"：日期时间输入框；"time"：时间输入框；"daterange"：日期范围输入框；"datetimerange"：日期时间范围输入框；"rich":富文本编辑器。默认为"text"。
name	String	输入组件名称
value	Number/String	输入组件显示的值。type属性为"date"、"datetime"、"time"时输入日期的文本格式/日期对象；type属性为"daterange"、"datetimerange"时输入日期的文本格式数组/日期对象数组，数组第一个元素为开始日期，第二个元素为结束日期。
readonly	Boolean	设置输入组件为只读状态
rows	Number	type属性为multi时生效，设置输入组件行数高度
all	Boolean	type属性为rich时生效，设置全功能富文本编辑器
image-width	String	type属性为rich时生效，设置上传图片压缩的宽度
image-height	String	type属性为rich时生效，设置上传图片压缩的高度
video-width	String	type属性为rich时生效，设置上传视频显示的宽度
video-height	String	type属性为rich时生效，设置上传视频显示的高度
rule	required/RegExp/Function	设置为"required"时，该输入组件为必填；设置正则表达式时验证输入组件的输入合法性；验证函数则自定义验证规则，返回true时为验证通过
title	String	设置输入组件的标题信息
onInput	Function	输入组件输入内容时触发的事件，function(e){...}，e为当前触发输入事件的对象。type属性为"date"、"datetime"、"time"时返回日期的文本格式；"daterange"、"datetimerange"时输入日期的文本格式数组，数组第一个元素为开始日期，第二个元素为结束日期。

下拉

导入组件

import { Picker, Option, createSignal } from 'zerl'

定义变量

const [getSingleValue, setSingleValue] = createSignal()
const [getMultiValue, setMultiValue] = createSignal([])

单选框

 <Picker placeholder='这是一个单选下拉组件' value={getSingleValue()} onSelected={e => { setSingleValue(e) }}>
  <Option name='红色' value='Red' />
  <Option name='黄色' value='Yellow' />
  <Option name='蓝色' value='Blue' />
  <Option name='白色' value='White' />
  <Option name='黑色' value='Black' />
</Picker>

只读

<Picker readonly placeholder='这是一个单选下拉组件' value={getSingleValue()} onSelected={e => { setSingleValue(e) }}>
  <Option name='红色' value='Red' />
  <Option name='黄色' value='Yellow' />
  <Option name='蓝色' value='Blue' />
  <Option name='白色' value='White' />
  <Option name='黑色' value='Black' />
</Picker>

搜索

<Picker max={3} placeholder='这是一个单选下拉组件' value={getSingleValue()} onSelected={e => { setSingleValue(e) }}>
  <Option name='红色' value='Red' />
  <Option name='黄色' value='Yellow' />
  <Option name='蓝色' value='Blue' />
  <Option name='白色' value='White' />
  <Option name='黑色' value='Black' />
</Picker>

多选框

<Picker multi placeholder='这是一个多选下拉组件' value={getMultiValue2()} onSelected={e => {setMultiValue2(e) }}>
  <Option name='红色' value='Red' />
  <Option name='黄色' value='Yellow' />
  <Option name='蓝色' value='Blue' />
  <Option name='白色' value='White' />
  <Option name='黑色' value='Black' />
  <Option name='青色' value='Cyan' />
  <Option name='紫色' value='Purple' />
</Picker>

只读

<Picker multi readonly placeholder='这是一个多选下拉组件' value={getMultiValue2()} onSelected={e => {setMultiValue2(e) }}>
  <Option name='红色' value='Red' />
  <Option name='黄色' value='Yellow' />
  <Option name='蓝色' value='Blue' />
  <Option name='白色' value='White' />
  <Option name='黑色' value='Black' />
  <Option name='青色' value='Cyan' />
  <Option name='紫色' value='Purple' />
</Picker>

搜索

<Picker multi max={3} placeholder='这是一个多选下拉组件' value={getMultiValue2()} onSelected={e => {setMultiValue2(e) }}>
  <Option name='红色' value='Red' />
  <Option name='黄色' value='Yellow' />
  <Option name='蓝色' value='Blue' />
  <Option name='白色' value='White' />
  <Option name='黑色' value='Black' />
  <Option name='青色' value='Cyan' />
  <Option name='紫色' value='Purple' />
</Picker>

属性说明

组件	名称	属性	描述
Picker	multi	Boolean	设置选择类型，multi=true为多选
Picker	value	String	输入组件名称
Picker	value	Number/String/Number[]/String[]	设置选择组件当前选项的值，multi=false时，传入Number/String的值；multi=true时传入Number[]/String[]
Picker	readonly	Boolean	设置选择组件为只读状态
Picker	max	Number	设置选项显示的项目数量，设置max的值时选项出现筛选功能。
Picker	onSelected	Function	选择内容时触发的事件，function(e){...}，multi=false时，e为当前选择项的Number/String的值；multi=true时，e为当前选择项的Number[]/String[]。
Option	name	String	设置选项的显示名称
Option	value	Number/String	设置选项的值

表格

导入组件

import { createSignal, createMemo, Table, Meta } from 'zerl'

数据定义

const data = [
	{
		module: '用户管理',
		name: '用户信息',
		type: 'ILF',
		fp: 10,
		degree: '高'
	},
	{
		module: '用户管理',
		name: '添加、修改用户信息',
		type: 'EI',
		fp: 4,
		degree: '高'
	},
	{
		module: '用户管理',
		name: '删除用户信息',
		type: 'EI',
		fp: 4,
		degree: '高'
	},
	{
		module: '用户管理',
		name: '用户信息列表、条件筛选',
		type: 'EQ',
		fp: 4,
		degree: '高'
	},
	{
		module: '用户管理',
		name: '用户详细信息',
		type: 'EQ',
		fp: 4,
		degree: '高'
	}
]

基本表格

<Table dataset={data}>
  <Meta name='模块' key='module' />
  <Meta name='功能点名称' key='name' />
  <Meta name='功能点类型' key='type' />
  <Meta name='UFP' key='fp' />
  <Meta name='重用度' key='degree' />
</Table>

列属性设置

<Table dataset={data} width='700'>
  <Meta name='模块' key='module' width='100' align='center' />
  <Meta name='功能点名称' key='name' align='center' />
  <Meta name='功能点类型' key='type' width='100' align='center' />
  <Meta name='UFP' key='fp' width='100' align='center' />
  <Meta name='重用度' key='degree' width='100' align='center' />
</Table>

定义单元格数据

<Table dataset={data}>
	<Meta name='序号' width='50' align='center'>
		{(_, index) => index + 1}
	</Meta>
	<Meta name='模块' key='module' width='100' align='center' />
	<Meta name='功能点名称' key='name' align='center' />
	<Meta name='功能点类型' key='type' width='100' align='center' />
	<Meta name='UFP' key='fp' width='100' align='center' />
	<Meta name='重用度' key='degree' width='100' align='center' />
	<Meta name='费用（元）' width='120' align='center'>
		{(item) => {
			return (
				(20000 *
					item.fp *
					1.21 *
					(item.degree === '高' ? 1 / 3 : item.degree === '中' ? 2 / 3 : 1) *
					7.19) /
				174
			).toFixed(2)
		}}
	</Meta>
</Table>

紧凑模式

<Table dataset={data} slim>
  <Meta name='模块' key='module' width='100' align='center' />
  <Meta name='功能点名称' key='name' align='center' />
  <Meta name='功能点类型' key='type' width='100' align='center' />
  <Meta name='UFP' key='fp' width='100' align='center' />
  <Meta name='重用度' key='degree' width='100' align='center' />
</Table>

主题

深色

<Table dataset={data} theme='darken'>
  <Meta name='模块' key='module' width='100' align='center' />
  <Meta name='功能点名称' key='name' align='center' />
  <Meta name='功能点类型' key='type' width='100' align='center' />
  <Meta name='UFP' key='fp' width='100' align='center' />
  <Meta name='重用度' key='degree' width='100' align='center' />
</Table>

浅色

<Table dataset={data} theme='lighten'>
  <Meta name='模块' key='module' width='100' align='center' />
  <Meta name='功能点名称' key='name' align='center' />
  <Meta name='功能点类型' key='type' width='100' align='center' />
  <Meta name='UFP' key='fp' width='100' align='center' />
  <Meta name='重用度' key='degree' width='100' align='center' />
</Table>

属性说明

组件	名称	属性	描述
Table	dataset	Object[]	表格内呈现的数据集
Table	width	String/Number	表格宽度
Table	slim	Boolean	设置表格为紧凑模式
Table	theme	String	设置表格主题模式。现代主题：theme="modern"；浅色主题：theme="lighten"；深色主题：theme="darken"
Meta	name	String	列显示名称
Meta	key	String	映射数据键值的名称
Meta	align	String	单元格对齐模式设置。left：单元格左对齐；right：单元格右对齐；center：单元格居中对齐
Meta	width	String/Number	固定列宽设置，不设置为自适应列宽

分页

导入组件

import { Pagi, PagiHandler } from 'zerl'

组件使用

let pagi: PagiHandler

const pageChange = (page) => dataloader(page)

const setLength = () => pagi.setLength

<Pagi ref={ (handler::PagiHandler) => pagi = handler} onClick={ (page:Number) => pageChange(page)}/>

属性说明

组件	名称	属性	描述
Pagi	ref	Function	获取分页组件句柄，function(hanler:PagiHandler){...}
Pagi	page	String/Number	设置默认页码，默认值：1
Pagi	size	String/Number	设置每页记录数，默认值：10
Pagi	length	String/Number	设置设置记录总数
Pagi	count	String/Number	设置分页器显示按钮数量，默认值：5
Pagi	onClick	Function	分页器点击按钮时触发的事件，参数为相对应的页码，function(page: Number){...}
PagiHandler	setPage	Function	设置页码，setPage(page: number)
PagiHandler	getPage	Function	获取当前页码
PagiHandler	setSize	Function	设置每页记录条数，setSize(size: number)
PagiHandler	getSize	Function	获取当前记录条数
PagiHandler	setLength	Function	设置记录数，setLength(length: number)
PagiHandler	getLength	Function	获取当前设置的记录数
PagiHandler	setCount	Function	设置显示页码按钮数，setCount(count: number)
PagiHandler	getCount	Function	获取当前显示页码按钮数

对话框

导入组件

import { Dialog } from 'zerl'

数据定义

const title = () => (
	<div>
		这里设置<span style={{ color: '#857' }}>标题</span>
	</div>
)
const content = () => <div>这里设置对话框内容</div>

普通对话框

const dialog = Dialog({ content })
dialog.open() //打开对话框

设置对话框标题

const dialog = Dialog({ title, content })
dialog.open() //打开对话框

设置对话框尺寸

const dialog = Dialog({ title, content, width: 500, height: 300 })
dialog.open() //打开对话框

设置全屏对话框

const dialog = Dialog({ title, content, fullscreen: true })
dialog.open() //打开对话框

设置对话框背景滤镜

const dialog = Dialog({ title, content, filter: 30 })
dialog.open() //打开对话框

设置抽屉

从左往右打开

const dialog = Dialog({ title, content, direction: 'ltr' })
dialog.open() //打开对话框

从上向下打开

const dialog = Dialog({ title, content, direction: 'ttb' })
dialog.open() //打开对话框

从右向左打开

const dialog = Dialog({ title, content, direction: 'rtl' })
dialog.open() //打开对话框

从下往上打开

const dialog = Dialog({ title, content, direction: 'btt' })
dialog.open() //打开对话框

关闭对话框

dialog.close() //关闭对话框

属性说明

名称	属性	描述
title	JSXElement	对话框标题内容。
content	JSXElement	对话框内容。
width	String/Number	设置对话框宽度。设置fullscreen时该属性无效
height	JSXElement	设置对话框高度。设置fullscreen时该属性无效
filter	Number	设置对话框对背景的滤镜效果，取值为[1-100]。设置fullscreen时该属性无效
fullscreen	Boolean	设置对话框全屏状态
direction	String	设置对话框高度。设置fullscreen时该属性无效
filter	Number	设置抽屉模式，ttb：从上到下打开；ltr：从左到右打开；rtl：从右到左打开；btt：从下到上打开。

菜单

导入组件

import { Menu, Group, Item } from 'zerl'

基本菜单

<Menu width={200}>
  <Group name='功能组一'>
    <Item>功能一</Item>
    <Item>功能二</Item>
  </Group>
  <Group name='功能组二' expanded>
    <Item>功能三</Item>
    <Item>功能四</Item>
  </Group>
</Menu>

横向排列

<Menu width={400} direction='horizontal'>
  <Group name='功能组一'>
    <Item>功能一</Item>
    <Item>功能二</Item>
  </Group>
  <Group name='功能组二' expanded>
    <Item>功能三</Item>
    <Item>功能四</Item>
  </Group>
</Menu>

主题

深色

<Menu width={200} theme='darken'>
  <Group name='功能组一'>
    <Item>功能一</Item>
    <Item>功能二</Item>
  </Group>
  <Group name='功能组二' expanded>
    <Item>功能三</Item>
    <Item>功能四</Item>
  </Group>
</Menu>

简单

<Menu width={200} theme='simple'>
  <Group name='功能组一'>
    <Item>功能一</Item>
    <Item>功能二</Item>
  </Group>
  <Group name='功能组二' expanded>
    <Item>功能三</Item>
    <Item>功能四</Item>
  </Group>
</Menu>

属性说明

组件	名称	属性	描述
Menu	width	String/Number	设置菜单固定宽度。默认宽度自动填充。
Menu	height	String/Number	设置菜单固定高度。默认高度自动填充。
Menu	top	Boolean	设置菜单是否置顶显示。
Menu	direction	Boolean	设置菜单扩展方向。direction="vertical"：菜单垂直扩展；direction="horizontal"：菜单水平扩展。默认为"vertical"
Menu	theme	String	设置菜单主题模式。theme="darken"：菜单设置为深色模式；theme="lighten"：菜单设置为浅色模式；theme="simple"：菜单设置为简单主题模式。默认为"lighten"
Group	name	String	设置菜单分组名称。
Group	expanded	Boolean	设置菜单分组时候是否展开。direction="vertical"时有效。
Item	onClick	Function	菜单项点击时触发的事件，function(e){...}，e为当前触发点击事件的对象。
Item	select	Boolean	设置是否选中
Item	route	String	设置点击跳转的路由，设置此属性时onClick失效
Item	icon	String	设置菜单图标

树

导入组件

import { Tree } from 'zerl'

初始化数据

let treeHandler: TreeHandler
const data = [
	{
		id: '1',
		title: '新节点1',
		children: [
			{ id: '4', title: '新节点1.1' },
			{ id: '5', title: '新节点1.2' }
		]
	},
	{ id: '2', title: '新节点2' },
	{ id: '3', title: '新节点2' }
]

组件的使用

<Tree title='Root Name' callback={(el:TreeHandler) => treeHandler = el} dataset={data}
/>

属性说明

组件	名称	属性	描述
Tree	title	String	树标题，根节点标题名称
Tree	callback	Function	返回节点控制句柄，function(h:TreeHandler){...}
Tree	dataset	NodeData[]	初始化树数据，非必要项
TreeHandler	eventName	String	获取树回调事件名称,'onLoad' \| 'nodeClick' \| 'expanded' \| 'unexpanded'
TreeHandler	getCurrentID	String	获取当前选择节点的ID
TreeHandler	appendChild	Function	在当前节点下加载新的子节点，function(id:string, title:string){...}
TreeHandler	appendChildren	Function	在当前节点下加载所有子节点，function(node: {id:string, title:string}[]){...}
TreeHandler	rename	Function	修改当前节点的标题内容，function(title:string){...}
TreeHandler	remove	Function	删除当前选择节点，function(){...}
NodeData	id	String	树节点ID
NodeData	title	String	树节点标题
NodeData	children	NodeData[]	子节点数据

页签

导入组件

import { Tabs, Tab } from 'zerl'

简单的页签

<Tabs>
  <Tab name='tab1' label='页签一'>
    <h1>这是页签一</h1>
  </Tab>
  <Tab name='tab2' label='页签二'>
    <h1>这是页签二</h1>
  </Tab>
  <Tab name='tab3' label='页签三'>
    <h1>这是页签三</h1>
  </Tab>
</Tabs>

可关闭页签

<Tabs>
  <Tab name='tab1' label='页签一' closable>
    <h1>这是页签一</h1>
  </Tab>
  <Tab name='tab2' label='页签二'>
    <h1>这是页签二</h1>
  </Tab>
  <Tab name='tab3' label='页签三' closable>
    <h1>这是页签三</h1>
  </Tab>
</Tabs>

动态页签

const [tabs, setTabs] = createSignal()
const tabHandler = () => {
	tabs().create({
		name: 'tab1',
		label: '动态页签',
		closable: true,
		children: <h1>这是新页签，新添加的</h1>
	})
}

<Tabs ref={el => setTabs(el)}>

属性说明

组件	名称	属性	描述
Tabs	ref	Function	组件属性，通过方法获取Tabs句柄，function(tabs: Tabs){...}
Tabs	create	Function	组件方法，动态创建页签，类型：方法；参数：name-页签名称，唯一标识，label-页签显示名称，closable-页签是否可以关闭，children-页签内显示内容。
Tabs	getElement	Function	组件方法，返回页签HTML对象
Tab	name	String	页签名称，唯一标识
Tab	label	String/JSXElement	页签显示名称
Tab	closable	Boolean	页签是否可以关闭

轮播

导入组件

import { Row, Swiper, Slide } from 'zerl'

简单的轮播组件

<Swiper>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

带导航的轮播组件

<Swiper nav>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

带分页的轮播组件

普通分页

<Swiper pagi>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

数字分页

<Swiper pagi='fraction'>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

进度条分页

<Swiper pagi='progressbar'>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

自定义分页

<Swiper pagi={(index, className) => (
    <div class={`${className} ${styles.bullets}`}>{index + 1}</div>
  )}
>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

纵向轮播

<Swiper pagi vertical>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

自动轮播

<Swiper pagi autoplay='5'>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

循环轮播

<Swiper pagi loop nav>
  <Slide>
    <Row class='fill' center>
      <h1>Slide A</h1>
    </Row>
  </Slide>
  <Slide>
    <Row class='fill' center>
      <h1>Slide B</h1>
    </Row>
  </Slide>
</Swiper>

属性说明

组件	名称	属性	描述
Swiper	class	String	设置轮播组件样式模块
Swiper	style	String/CSS对象	设置轮播组件样式
Swiper	nav	Boolean	设置导航按钮
Swiper	loop	Boolean	设置循环播放
Swiper	autoplay	Boolean/Number/String	设置自动播放，设置数值/字符时，设置停留时间，单位（秒）
Swiper	vertical	Boolean	设置为纵向轮播模式
Swiper	pagi	Boolean/String/Function	Boolean类型时，显示分页小圆点。String类型时，progressbar-用进度条样式显示分页，fraction-用数字样式显示分页。Function类型时,自定义样式-function(index,className){...}，index-页码，className-基础样式模块名称。
Slide	class	String	设置轮播组件样式模块
Slide	style	String/CSS对象	设置轮播组件样式

表单

表单的基本结构

获取表单句柄

const [getForm, setForm] = createSignal()

<form action='form.simple' ref={el => setForm1(el)}>
...
</form>

action 指向处理数据的模块,格式:[模块名称].[方法名称]

表单的验证

<form action='form.simple' ref={el => setForm2(el)}>
  <Col>
    <Row class='fill' middle>
      <Text
        title='标题'
        name='title'
        rule={val => val.length > 4}
        placeholder='请输入信息标题'
        hint='至少输入不少于5个字符'
      />
      <Button
        type='radio'
        title='类型'
        name='category'
        rule='required'
        hint='需要选择类型'
      >
        <Option name='内部信息' value='inner' />
        <Option name='保密信息' value='secret' />
        <Option name='对外信息' value='external' />
      </Button>
    </Row>
    <Row class='fill' middle>
      <Text
        type='date'
        title='显示日期'
        name='displayDate'
        rule='required'
        placeholder='请输入显示日期'
        hint='显示日期不能为空'
      />
      <Button
        type='check'
        title='标签'
        name='label'
        rule={val => val.length > 2}
        hint='至少选择三项'
      >
        <Option name='文娱' value='culture' />
        <Option name='科技' value='tech' />
        <Option name='教育' value='edu' />
        <Option name='健康' value='health' />
        <Option name='时事' value='news' />
      </Button>
    </Row>
    <Row class='fill' middle>
      <Text type='multi' title='内容' name='content' />
    </Row>
    <Row class='fill' right>
      <Button
        onClick={async () => {
          const result = await form2().submit()
          if (result) {
            Confirm(
              '表单提交信息',
              <div>
                {Object.keys(result).map(key => {
                  return (
                    <Row>
                      <div
                        style={{
                          width: '120px',
                          'font-weight': 'bold'
                        }}
                      >
                        {key}
                      </div>
                      {JSON.stringify(result[key])}
                    </Row>
                  )
                })}
              </div>
            )
          }
        }}
      >
        保存
      </Button>
    </Row>
  </Col>
</form>

文件

导入组件

import { FileList, File } from 'zerl'

简单的文件组件

<FileList />

文件多选

<FileList multiple/>

初始化文件列表

<FileList multiple>
  <File id='2fed96c8130e804e8c6f940981370fb7'></File>
  <File id='096f60ff49ec8b3039902e190c26ee10'></File>
</FileList>

文件上传

let fileList

<FileList ref={el=>fileList = el}/>
<Button onClick={async ()=>{const fileIds = await fileList.upload()}}/>

属性说明

组件	名称	属性	描述
FileList	ref	Function	属性，获取文件对象句柄，function(el: FileList){...}
FileList	upload	Function	文件上传函数,上传成功后返回文件ID
FileList	files	Function	返回组件中的文件信息
FileList	accept	String	设置筛选可选择文件的类型
FileList	multiple	Boolean	设置是否可以上传多个文件
FileList	title	String	设置组件的标题
File	id	String	文件指针（ID），该ID在文件上传后返回

服务组件

逻辑

组件功能

实现服务端数据处理的逻辑组件，用于与浏览器或其他客户端进行数据交互

模块文件

在模块文件头部添加 #!module 标志

组件使用

组件定义

#!module
import type { Context } from 'zerl'
export default class {
	public async save(data: Schema) {
		return data
	}
	public async load(data: queryData, ctx: Context) {
		return [data]
	}
}

UI 模块调用

import { Button } from 'zerl'
import Service from './Service'
const service = new Service()

<Button onClick = {async ()=> {
  const remoteData = await service.save({data: ‘test data’})
  }
}>
  get remote data
</Button>

远程组件调用

// 普通远程组件调用
import Service from 'rpc://192.168.1.10:8080/Service'
// ssl远程组件调用
import Service from 'rpcs://192.168.1.11:8080?Service'

任务

组件功能

应用启动时一并启动的工作任务线程，可设置一次性运行任务与周期性运行任务

任务文件

在任务文件头部添加 #!job 标志

组件使用

#!job
import { Once, Timer } from "zerl"
import type { Context, ServerInstance } from "zerl"
export default class {
  // 声明后自动注入当前启动的服务实例
  private getCurrentInstance!: ServerInstance
  @Once()
  public init(){
    // 获取服务实例
    const server = this.getCurrentInstance()
    // 添加新的服务中间件
    server.use(async (ctx: Context, next:any) => {
      if(/^\/api/?/.test(ctx.url)){
        ctx.body = "append new middleware"
      } else {
        await next()
      }
    })
  }

  @Timer(60)
  public synchronize(){
    ...
  }
}

访问控制

组件功能

服务模块的会根据客户端发起的请求进行访问权限验证，使用@Expose 装饰器则不验证访问权限

授权与撤销权限

#!module
import { Expose, Grent, Revoke } from 'zerl'
import type { Context } from 'zerl'
export default class {
	// 访问时，不验证UI端访问权限
	@Expose public async login(data, ctx: Context) {
		Grent(ctx) //授权访问权限
	}

	// 只有授权后，UI端才能访问此方法
	public async logout(data: ant, ctx: Context) {
		Revoke(ctx) //回收访问权限
	}
}

MySQL

组件使用

#!module
import { MySQL, Schema } from 'zerl'
@Schema('TABLE', 'ID')
export default class extends MySQL {
	// 数据插入
	public async insertData(data: any) {
		this.insert(data)
		return { result: 'ok' }
	}
	// 数据更新
	public async updateData(data: any) {
		this.update(data)
		return { result: 'ok' }
	}

	// 数据删除
	public async removeData(data: any) {
		this.remove({ ID: data.id })
		return { result: 'ok' }
	}

	// 数据查询
	public async queryData(data: any) {
		return await this.query('SELECT * FROM TABLE WHERE ID=?', [data.id])
	}

	// 事务处理
	public async transaction(data: any) {
		const flow = this.flow()
		flow.insert(data)
		flow.update({ name: 'new name' })
		flow.pipe('DELETE FROM TABLE WHERE ID = 3')
		await flow.exec()
		return { result: 'ok' }
	}
}

SQL 文件

命名

[文件名].sql

文件格式

--table.sql
--define query

SELECT * FROM TABLE;

每个 sql 语句结束后必须加“;”，sql 语句头部需要定义语句的变量名，声明格式：--define xxx

调用 SQL 语句

this.query('sql:table.query')

Redis

组件使用

#!module
import { Redis } from "zerl"
// 数据模型
export default class{
  public async load(data: any){
    return await Redis(async (client) => {
      const { keys } = await
      client.scan(0, { MATCH: "*,name,*" })
      return client.hGetAll(keys[0])
    }
  }
}

操作命令参考Redis 命令文档

装饰器

MySQL 控制表定义

@Schema([表名],[主键])

// 设置表定义后，所有MySQL操作都默认使用设置的表名和主键名
#!module
@Schema('TABLE', 'ID')
export default class extends MySQL {
  ...
}

访问暴露（逻辑组件内使用）

// 设置访问暴露装饰器后，该方法访问对外完全公开，不受权限控制影响。
@Expose public async login(data: any){
  ...
}

一次性执行方法（任务组件内使用）

// 应用程序启动时立即启动
@Once() public runAtStart(){
  ...
}

// 应用程序启动时，延迟5秒启动
@Once(5) public runAtStart(){
  ...
}

定时执行方法（任务组件内使用）

// 应用程序启动时，触发启动定时器，方法每5秒执行一次
@Timer(5) public tikTok(){
  ...
}

扩展类型

日期+

格式化日期

// fmt: 日期格式 y-年，M-月，d-日，h-小时，m-分钟，s-秒，q-季度，S-毫秒
Date.format(fmt: string): string

日期推算

//	year 当前日期累加年数
//  month 当前日期累加月数
//	day 当前日期累加日数
Date.calc(year: number, month: number, day: number): Date

输出日期文本格式 yyyy-MM-dd

//	year 当前日期累加年数
//  month 当前日期累加月数
//	day 当前日期累加日数
Date.date(year?: number, month?: number, day?: number): string

输出时间文本格式 hh:mm:ss

Date.time(): string

输出日期时间文本格式 yyyy-MM-dd hh:mm:ss

//	year 当前日期累加年数
//  month 当前日期累加月数
//	day 当前日期累加日数
Date.datetime(year?: number, month?: number, day?: number): string

月份数量计算

// reference 比较日期 yyyy-MM-dd hh:mm:ss
// 返回相隔月份数量
Date.monthdiff(reference: string | Date): number

时间戳

Date.timestamp(): number

字符串+

驼峰格式转连接符格式

// separator: 连接字符
String.camelfalt(separator: string): string

定长前补零

// digit: 字符串总长度
String.prefix(digit:number): string

Base64 字符串转 Blob 类型

String.blob(): Blob

字符串加密（服务组件内使用）

String.encode(): string

字符串解密（服务组件内使用）

String.decode(): string

生成 MD5 摘要信息

String.md5(): string

数字+

千分位格式

Number.thou(): string

数组+

数组分组

// algorithm: 分组函数 function(element: any): string, element为数组中的每个元素的值，返回值为分组名称
Array.group(algorithm: Function): object

Version	Downloads (Last 7 Days)	Published
0.4.0	53	8 days ago
0.3.7	1	22 days ago
0.3.6	3	2 months ago
0.3.2	0	8 months ago
0.3.1	0	9 months ago
0.3.0	0	10 months ago
0.2.25	0	10 months ago
0.2.24	0	10 months ago
0.2.23	0	a year ago
0.2.22	0	a year ago

zerl

ZERL 云原生全栈技术框架开发指南

简介

一条来自 MVVM 江湖的传说：

什么是 ZERL ？

ZERL 对全栈实现作出了以下的尝试：

开始使用

创建应用

开发

UI 模块开发

规范

UI 模块 API

服务模块开发

规范

服务模块 API

封装

部署

配置

UI 组件

布局

导入组件

水平布局组件（Row）

左上角对齐

左对齐垂直居中

左下角对齐

完全居中

靠顶部水平居中

靠底部水平居中

右上角对齐

右对齐垂直居中

右下角对齐

属性说明

垂直布局组件（Col）

左上角对齐

靠左居中

左下角对齐

完全居中

靠顶部水平居中

靠底部水平居中

右上角对齐

右对齐垂直居中

右下角对齐

属性说明

分割线

水平分割线

垂直分割线

属性说明

路由

导入组件

视图加载

同步加载

异步加载

自定义加载

导航

菜单导航

脚本导航

属性说明

按钮

导入组件

普通按钮

缩小设置

小号

超小号

状态设置

成功状态

警告状态

危险状态

信息状态

简单状态

形状设置

圆角

圆形

方形

明亮模式

属性说明

单选

导入组件

定义变量

水平排列

垂直排列