内置组件
页面级组件
该类型组件适用于 menu 中的末级页面，即当前页面下没有 children 的页面。
dataTable
数据表格，最常用组件之一，用于列表展示数据信息，集成分页、查询等功能。
除了 menu 中的公用配置外，dataTable 还支持以下私有配置：
| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| totalUrl | string | 单独获取总条数的接口 | TODO 每当查询条件改变时，携带查询条件重新请求此接口 |
该组件在加载时，会自动向同路径接口发起 GET 请求，获取表格数据及相关配置。返回内容如下：
// query
{
page: 1,
limit: 10
}{
code: 200, message: "",
data: {
data: [],
fields: [],
search: [],
advSearch: [],
filters: [],
total: 0
}
}| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| data | object[] | 表格数据 | |
| fields | object[] | 表头数据 | |
| search | object[] | 简单查询 | |
| advSearch | object[] | 高级查询 | |
| filters | object[] | 固定过滤 | |
| total | number | 数据总条数 | TODO 单独配接口返回数据条数 |
data
根据实际业务返回数据即可，如：
[
{id: 'xxx', title: '', description: '', thumb: '', author: '', create_at:'', update_at: ''}
]fields
根据实际业务数据，按下面的格式返回即可。若不返回此项，则会拿 data 中第一条数据的 key 做表头。
[
{key: 'id', lable: '编号'},
{key: 'title', lable: '标题'}
]| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| key | string | 字段名称 | 需与 data 中字段匹配 |
| label | string | 显示名称 | |
| component | string | 内置组件名称 | 详见通用组件 field |
search
基础搜索，返回数据格式如下：
[
{key: '', label: '', placeholder: ''}
]| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| key | string | 要搜索的字段名称 | 同 data 中的 key |
| label | string | 显示名称 | |
| component | string | 内置组件 | 请参考 通用组件 form |
advSearch
高级搜索，以侧边滑出表单的形式展现。入口在基础搜索中，所以使用高级搜索前请先配置基础搜索。
高级搜索的数据格式与基础搜索一样。同样也是使用的 通用的 form 组件，这里不再赘述。
filters
固定过滤， 此配置项可独立使用，无需开启搜索或高级搜索。返回数据格式如下：
[
{label: '', query: {}}
]| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| label | string | 显示名称 | |
| query | object | 查询参数 | 如：{category: '3'}过滤 category 为 ‘3’ 的数据。 多个条件以 and 形式连接。 |
父级组件
该类型组件适用于 menu 中非末级页面。
目前还没有父级组件。
操作级组件
该类型组件适用于 menu 中的操作项 actions 。
confirm
“确认操作“组件，常用于删除前的二次确认。
除了通用的 actions 配置外，还支持以下私有配置：
[
message: '',
color: '',
local: {}
]| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| message | string | 二次确认的文本内容 | |
| color | string | 颜色 | 支持 主题配色 的所有颜色。 |
| local | object | 语言包 | {cancel: '', submit: ''} |
该组件目前不会拉取任何接口数据。
该组件会向同路径接口 POST 提交 query 中配置的 key 及相关的 value，如：
// query params
{ id: '' } // query: ['id']detail
详情组件，会以数据表的形式展示当前数据详情。
除了通用的 actions 配置外，还支持以下私有配置：
[
local: {}
]| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| local | object | 语言包 | {label: '', value: '', close: ''} |
该组件加载时会携带 query 中配置的参数，自动 GET 请求同路径接口，获取数据详情及表头数据。如下：
// query params
{id: 'x'} // query: ['id']{
code: 200, message: '',
data: {
data: [],
fields: []
}
}| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| data | object | 表格数据 | 如： {id: '', name: ''} |
| fields | object[] | 表头数据 | 同 dataTable 的 fields |
该组件没有提交操作。
form
表单组件，常用于添加或编辑操作。除了通用的 actions 配置外，还支持以下私有配置：
[
local: {}
]| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| local | object | 语言包 | {submit: '', cancel: ''} |
该组件加载时会携带 query 中配置的参数，自动 GET 请求同路径接口，获取数据详情及表头数据。如下：
// query params
{id: 'x'} // query: ['id']{
code: 200, message: '',
data: {
data: [],
fields: []
}
}| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| data | object[] | 表单数据 | 表单数据，{key: value} 形式，如不返回则不为表单赋值。 |
| fields | object[] | 表单项配置 | 请参考 通用组件 form |
该组件会向同路径接口 POST 提交表单数据，同时携带 query 中配置的 GET 参数，如：
// query params
{ id: 'x' } // query: ['id']
// post body
{ id: 'x', name: 'y', age: 'z' }通用组件
form
表单组件，通用配置项如下：
{
key: '', label: '', placeholder: '', required: false, valids: [], component: ''
}| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| key | string | 字段名称 | |
| label | string | 显示名称 | |
| placeholder | string | 占位符信息 | |
| required | boolean | 是否必填 | TODO 还没完全处理好 |
| valids | object[] | 表单验证规则 | TODO 还没完全处理好 |
| component | string | 内置组件 |
input
默认的表单组件，未指定组件时会以 input 组件渲染。
textarea
多行文本组件，除了支持上面通用配置项外还支持以下内容：
{
rows: 3, autoresize: false, maxrows: 0
}| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| rows | number | string | 行数 | 默认值为 3 |
| autoresize | boolean | 根据内容，自动调整高度 | 设置 autoresize 后， 如果内容超过 rows 设置的行数， 组件高度会随内容自动变高。 |
| maxrows | number | string | 最大行数 | 此项能控制 autoresize 的最大行数， 默认为 0 不限。 |
select
下拉菜单，除了支持上面通用配置项外还支持以下内容：
{
options: [], multiple: false
}| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| options | object[] | 菜单候选项 | {label: '', value: ''} |
| multiple | boolean | 多选 | 默认 false |
| 异步获取菜单候选项 | TODO | ||
| 异步查询菜单候选项 | TODO | ||
| 可创建菜单项 | TODO |
date
日期选择组件，除了支持上面通用配置项外还支持以下内容：
{
format: '', showFormat: ''
}| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| format | string | 日期格式 | 默认为 yyyy-MM-dd具体含义可参考这里 |
| showFormat | string | 显示的格式 | 这个是在页面上显示时的格式， 未定义则按 format 显示。 |
dateRange
日期范围选择组件，跟 date 组件的配置项完全一样，只不过此组件的值不是 string，而是 object：
{
start: '', end: ''
}wangEditor
富文本编辑器，基于 wangEditor 实现。除了支持上面通用配置项外还支持以下内容：
{
mode: 'default', toolbarConfig: {}, editorConfig: {}
}| 字段 | 数据类型 | 含义 | 备注 |
|---|---|---|---|
| mode | string | 编辑器模式 | 默认为 default 可选值： simple |
| toolbarConfig | object | 工具栏配置 | 请参考官方文档 |
| editorConfig | object | 编辑器配置 | 请参考官方文档 |
field
针对单字段的渲染再处理。比如把一个图像地址，显示为一个 32x32 的图片；或者把一个状态值显示为可读的状态。
注意：
目前组件过少，配置项暂时不稳定！
enum
枚举，常用于把状态值显示为成可读内容。如：
{
component: 'enum',
items: [
{label: '男', value: '1'}, // 当前字段值为1，则显示“男”
{label: '女', value: '2', color: 'red', variant: 'soft'},
{label: '未知', value: '0'},
]
}detail
弹窗显示详情，同 actions 中的 detail。