feat: component documentation
This commit is contained in:
chenos
parent
34e8226ddb
commit
ee8a1ea187
@ -20,7 +20,7 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
includes: ['docs'],
|
||||
includes: ['docs', 'packages/client/src/schemas'],
|
||||
},
|
||||
styles: [
|
||||
`
|
||||
|
||||
@ -3,4 +3,57 @@ group:
|
||||
title: Collection Fields
|
||||
path: /components/collection-fields
|
||||
order: 3
|
||||
---
|
||||
---
|
||||
|
||||
# Attachment - 附件
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const attachment: FieldOptions = {
|
||||
name: 'attachment',
|
||||
type: 'object',
|
||||
group: 'media',
|
||||
title: '附件',
|
||||
isAssociation: true,
|
||||
default: {
|
||||
dataType: 'belongsToMany',
|
||||
target: 'attachments',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'array',
|
||||
// title,
|
||||
'x-component': 'Upload.Attachment',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Upload.DesignableBar',
|
||||
},
|
||||
},
|
||||
initialize: (values: any) => {
|
||||
if (!values.through) {
|
||||
values.through = `t_${uid()}`;
|
||||
}
|
||||
if (!values.foreignKey) {
|
||||
values.foreignKey = `f_${uid()}`;
|
||||
}
|
||||
if (!values.otherKey) {
|
||||
values.otherKey = `f_${uid()}`;
|
||||
}
|
||||
if (!values.sourceKey) {
|
||||
values.sourceKey = 'id';
|
||||
}
|
||||
if (!values.targetKey) {
|
||||
values.targetKey = 'id';
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.x-component-props.multiple': {
|
||||
type: 'boolean',
|
||||
'x-content': '允许上传多个文件',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Checkbox',
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -4,3 +4,56 @@ group:
|
||||
path: /zh-CN/components/collection-fields
|
||||
order: 3
|
||||
---
|
||||
|
||||
# Attachment - 附件
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const attachment: FieldOptions = {
|
||||
name: 'attachment',
|
||||
type: 'object',
|
||||
group: 'media',
|
||||
title: '附件',
|
||||
isAssociation: true,
|
||||
default: {
|
||||
dataType: 'belongsToMany',
|
||||
target: 'attachments',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'array',
|
||||
// title,
|
||||
'x-component': 'Upload.Attachment',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Upload.DesignableBar',
|
||||
},
|
||||
},
|
||||
initialize: (values: any) => {
|
||||
if (!values.through) {
|
||||
values.through = `t_${uid()}`;
|
||||
}
|
||||
if (!values.foreignKey) {
|
||||
values.foreignKey = `f_${uid()}`;
|
||||
}
|
||||
if (!values.otherKey) {
|
||||
values.otherKey = `f_${uid()}`;
|
||||
}
|
||||
if (!values.sourceKey) {
|
||||
values.sourceKey = 'id';
|
||||
}
|
||||
if (!values.targetKey) {
|
||||
values.targetKey = 'id';
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.x-component-props.multiple': {
|
||||
type: 'boolean',
|
||||
'x-content': '允许上传多个文件',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Checkbox',
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,30 @@
|
||||
# CheckboxGroup - 复选框
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const checkboxGroup: FieldOptions = {
|
||||
name: 'checkboxGroup',
|
||||
type: 'object',
|
||||
group: 'choices',
|
||||
order: 5,
|
||||
title: '复选框',
|
||||
default: {
|
||||
interface: 'checkboxGroup',
|
||||
dataType: 'json',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Checkbox.Group',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Checkbox.Group.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.enum': dataSource,
|
||||
},
|
||||
operations: multipleSelect.operations,
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,31 @@
|
||||
# Checkbox - 勾选
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const checkbox: FieldOptions = {
|
||||
name: 'checkbox',
|
||||
type: 'object',
|
||||
group: 'choices',
|
||||
order: 1,
|
||||
title: '勾选',
|
||||
default: {
|
||||
dataType: 'boolean',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'boolean',
|
||||
// title,
|
||||
'x-component': 'Checkbox',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Checkbox.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
operations: [
|
||||
{ label: '是', value: '$isTruly', selected: true, noValue: true },
|
||||
{ label: '否', value: '$isFalsy', noValue: true },
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,83 @@
|
||||
# ChinaRegion - 中国行政区
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const chinaRegion: FieldOptions = {
|
||||
name: 'chinaRegion',
|
||||
type: 'object',
|
||||
group: 'choices',
|
||||
order: 7,
|
||||
title: '中国行政区划',
|
||||
isAssociation: true,
|
||||
default: {
|
||||
dataType: 'belongsToMany',
|
||||
target: 'china_regions',
|
||||
targetKey: 'code',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'array',
|
||||
// title,
|
||||
'x-component': 'Cascader',
|
||||
'x-component-props': {
|
||||
changeOnSelectLast: false,
|
||||
loadData: '{{ ChinaRegion.loadData() }}',
|
||||
labelInValue: true,
|
||||
maxLevel: 3,
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'code',
|
||||
children: 'children',
|
||||
},
|
||||
},
|
||||
'x-reactions': [
|
||||
'{{ ChinaRegion.useFieldValue }}',
|
||||
'{{ useAsyncDataSource(ChinaRegion.loadDataSource()) }}',
|
||||
],
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Cascader.DesignableBar',
|
||||
},
|
||||
},
|
||||
initialize: (values: any) => {
|
||||
if (!values.through) {
|
||||
values.through = `t_${uid()}`;
|
||||
}
|
||||
if (!values.foreignKey) {
|
||||
values.foreignKey = `f_${uid()}`;
|
||||
}
|
||||
if (!values.otherKey) {
|
||||
values.otherKey = `f_${uid()}`;
|
||||
}
|
||||
if (!values.sourceKey) {
|
||||
values.sourceKey = 'id';
|
||||
}
|
||||
if (!values.targetKey) {
|
||||
values.targetKey = 'id';
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.x-component-props.maxLevel': {
|
||||
type: 'number',
|
||||
'x-component': 'Radio.Group',
|
||||
'x-decorator': 'FormItem',
|
||||
title: '可选择的层级',
|
||||
default: 3,
|
||||
enum: [
|
||||
{ value: 1, label: '省' },
|
||||
{ value: 2, label: '市' },
|
||||
{ value: 3, label: '区/县' },
|
||||
{ value: 4, label: '乡镇/街道' },
|
||||
{ value: 5, label: '村/居委会' },
|
||||
],
|
||||
},
|
||||
'uiSchema.x-component-props.changeOnSelectLast': {
|
||||
type: 'boolean',
|
||||
'x-component': 'Checkbox',
|
||||
'x-content': '必须选到最后一级',
|
||||
'x-decorator': 'FormItem',
|
||||
},
|
||||
},
|
||||
operations: [{ label: '等于', value: 'code.in' }],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,33 @@
|
||||
# CreatedAt - 添加时间
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const createdAt: FieldOptions = {
|
||||
name: 'createdAt',
|
||||
type: 'object',
|
||||
group: 'systemInfo',
|
||||
order: 1,
|
||||
title: '添加时间',
|
||||
sortable: true,
|
||||
default: {
|
||||
dataType: 'date',
|
||||
field: 'created_at',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'datetime',
|
||||
title: '添加时间',
|
||||
'x-component': 'DatePicker',
|
||||
'x-component-props': {},
|
||||
'x-read-pretty': true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'DatePicker.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
...dateTimeProps,
|
||||
},
|
||||
operations: datetime.operations,
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,37 @@
|
||||
# createdBy - 添加人
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const createdBy: FieldOptions = {
|
||||
name: 'createdBy',
|
||||
type: 'object',
|
||||
group: 'systemInfo',
|
||||
order: 3,
|
||||
title: '添加人',
|
||||
isAssociation: true,
|
||||
default: {
|
||||
dataType: 'belongsTo',
|
||||
target: 'users',
|
||||
foreignKey: 'created_by_id',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'object',
|
||||
title: '添加人',
|
||||
'x-component': 'Select.Drawer',
|
||||
'x-component-props': {
|
||||
fieldNames: {
|
||||
value: 'id',
|
||||
label: 'nickname',
|
||||
},
|
||||
},
|
||||
'x-decorator': 'FormItem',
|
||||
'x-read-pretty': true,
|
||||
'x-designable-bar': 'Select.Drawer.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,42 @@
|
||||
# Datetime - 日期
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const datetime: FieldOptions = {
|
||||
name: 'datetime',
|
||||
type: 'object',
|
||||
group: 'datetime',
|
||||
order: 1,
|
||||
title: '日期',
|
||||
sortable: true,
|
||||
default: {
|
||||
dataType: 'date',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'datetime',
|
||||
// title,
|
||||
'x-component': 'DatePicker',
|
||||
'x-component-props': {
|
||||
showTime: false,
|
||||
},
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'DatePicker.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
...dateTimeProps,
|
||||
},
|
||||
operations: [
|
||||
{ label: '等于', value: '$dateOn', selected: true },
|
||||
{ label: '不等于', value: '$dateNotOn' },
|
||||
{ label: '早于', value: '$dateBefore' },
|
||||
{ label: '晚于', value: '$dateAfter' },
|
||||
{ label: '不早于', value: '$dateNotBefore' },
|
||||
{ label: '不晚于', value: '$dateNotAfter' },
|
||||
{ label: '非空', value: '$notNull', noValue: true },
|
||||
{ label: '为空', value: '$null', noValue: true },
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,30 @@
|
||||
# Email - 电子邮箱
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const email: FieldOptions = {
|
||||
name: 'email',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 4,
|
||||
title: '电子邮箱',
|
||||
sortable: true,
|
||||
default: {
|
||||
dataType: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Input',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-validator': 'email',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
operations: string.operations,
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,27 @@
|
||||
# Icon - 图标
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const icon: FieldOptions = {
|
||||
name: 'icon',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 8,
|
||||
title: '图标',
|
||||
default: {
|
||||
dataType: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'IconPicker',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'IconPicker.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
# LinkTo - 关联字段
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const linkTo: FieldOptions = {
|
||||
name: 'linkTo',
|
||||
type: 'object',
|
||||
group: 'relation',
|
||||
order: 1,
|
||||
title: '关联字段',
|
||||
isAssociation: true,
|
||||
default: {
|
||||
dataType: 'belongsToMany',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'array',
|
||||
// title,
|
||||
'x-component': 'Select.Drawer',
|
||||
'x-component-props': {},
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Select.Drawer.DesignableBar',
|
||||
},
|
||||
},
|
||||
initialize: (values: any) => {
|
||||
if (values.dataType === 'belongsToMany') {
|
||||
if (!values.through) {
|
||||
values.through = `t_${uid()}`;
|
||||
}
|
||||
if (!values.foreignKey) {
|
||||
values.foreignKey = `f_${uid()}`;
|
||||
}
|
||||
if (!values.otherKey) {
|
||||
values.otherKey = `f_${uid()}`;
|
||||
}
|
||||
if (!values.sourceKey) {
|
||||
values.sourceKey = 'id';
|
||||
}
|
||||
if (!values.targetKey) {
|
||||
values.targetKey = 'id';
|
||||
}
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
target: {
|
||||
type: 'string',
|
||||
title: '要关联的数据表',
|
||||
required: true,
|
||||
'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
},
|
||||
// 'uiSchema.x-component-props.fieldNames.label': {
|
||||
// type: 'string',
|
||||
// title: '要显示的标题字段',
|
||||
// required: true,
|
||||
// 'x-reactions': ['{{useAsyncDataSource(loadCollectionFields)}}'],
|
||||
// 'x-decorator': 'FormItem',
|
||||
// 'x-component': 'Select',
|
||||
// },
|
||||
'uiSchema.x-component-props.multiple': {
|
||||
type: 'boolean',
|
||||
'x-content': '允许关联多条记录',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Checkbox',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,26 @@
|
||||
# Markdown
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const markdown: FieldOptions = {
|
||||
name: 'markdown',
|
||||
type: 'object',
|
||||
title: 'Markdown',
|
||||
group: 'media',
|
||||
default: {
|
||||
dataType: 'text',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Markdown',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Markdown.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,49 @@
|
||||
# MultipleSelect - 下拉选择（多选）
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const multipleSelect: FieldOptions = {
|
||||
name: 'multipleSelect',
|
||||
type: 'object',
|
||||
group: 'choices',
|
||||
order: 3,
|
||||
title: '下拉选择（多选）',
|
||||
default: {
|
||||
dataType: 'json',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'array',
|
||||
// title,
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
mode: 'multiple',
|
||||
},
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Select.DesignableBar',
|
||||
enum: [],
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.enum': dataSource,
|
||||
},
|
||||
operations: [
|
||||
{
|
||||
label: '等于',
|
||||
value: '$match',
|
||||
selected: true,
|
||||
schema: { 'x-component': 'Select' },
|
||||
},
|
||||
{
|
||||
label: '不等于',
|
||||
value: '$notMatch',
|
||||
schema: { 'x-component': 'Select' },
|
||||
},
|
||||
{ label: '包含', value: '$anyOf', schema: { 'x-component': 'Select' } },
|
||||
{ label: '不包含', value: '$noneOf', schema: { 'x-component': 'Select' } },
|
||||
{ label: '非空', value: '$notNull', noValue: true },
|
||||
{ label: '为空', value: '$null', noValue: true },
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
# Number - 数字
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const number: FieldOptions = {
|
||||
name: 'number',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 5,
|
||||
title: '数字',
|
||||
sortable: true,
|
||||
default: {
|
||||
dataType: 'float',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'number',
|
||||
// title,
|
||||
'x-component': 'InputNumber',
|
||||
'x-component-props': {
|
||||
stringMode: true,
|
||||
step: '0',
|
||||
},
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'InputNumber.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.x-component-props.step': {
|
||||
type: 'string',
|
||||
title: '精度',
|
||||
'x-component': 'Select',
|
||||
'x-decorator': 'FormItem',
|
||||
default: '0',
|
||||
enum: [
|
||||
{ value: '0', label: '1' },
|
||||
{ value: '0.1', label: '1.0' },
|
||||
{ value: '0.01', label: '1.00' },
|
||||
{ value: '0.001', label: '1.000' },
|
||||
{ value: '0.0001', label: '1.0000' },
|
||||
{ value: '0.00001', label: '1.00000' },
|
||||
],
|
||||
},
|
||||
},
|
||||
operations: [
|
||||
{ label: '等于', value: 'eq', selected: true },
|
||||
{ label: '不等于', value: 'ne' },
|
||||
{ label: '大于', value: 'gt' },
|
||||
{ label: '大于等于', value: 'gte' },
|
||||
{ label: '小于', value: 'lt' },
|
||||
{ label: '小于等于', value: 'lte' },
|
||||
// {label: '介于', value: 'between'},
|
||||
{ label: '非空', value: '$notNull', noValue: true },
|
||||
{ label: '为空', value: '$null', noValue: true },
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,27 @@
|
||||
# Password - 密码
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const password: FieldOptions = {
|
||||
name: 'password',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 7,
|
||||
title: '密码',
|
||||
default: {
|
||||
dataType: 'password',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Password',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Password.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,49 @@
|
||||
# Percent - 百分比
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const percent: FieldOptions = {
|
||||
name: 'percent',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 6,
|
||||
title: '百分比',
|
||||
sortable: true,
|
||||
default: {
|
||||
dataType: 'float',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'InputNumber',
|
||||
'x-component-props': {
|
||||
stringMode: true,
|
||||
step: '0',
|
||||
addonAfter: '%',
|
||||
},
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'InputNumber.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.x-component-props.step': {
|
||||
type: 'string',
|
||||
title: '精度',
|
||||
'x-component': 'Select',
|
||||
'x-decorator': 'FormItem',
|
||||
default: '0',
|
||||
enum: [
|
||||
{ value: '0', label: '1' },
|
||||
{ value: '0.1', label: '1.0' },
|
||||
{ value: '0.01', label: '1.00' },
|
||||
{ value: '0.001', label: '1.000' },
|
||||
{ value: '0.0001', label: '1.0000' },
|
||||
{ value: '0.00001', label: '1.00000' },
|
||||
],
|
||||
},
|
||||
},
|
||||
operations: number.operations,
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,30 @@
|
||||
# Phone - 手机号码
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const phone: FieldOptions = {
|
||||
name: 'phone',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 3,
|
||||
title: '手机号码',
|
||||
sortable: true,
|
||||
default: {
|
||||
dataType: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Input',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-validator': 'phone',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
operations: string.operations,
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,29 @@
|
||||
# RadioGroup - 单选框
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const radioGroup: FieldOptions = {
|
||||
name: 'radioGroup',
|
||||
type: 'object',
|
||||
group: 'choices',
|
||||
order: 4,
|
||||
title: '单选框',
|
||||
default: {
|
||||
dataType: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Radio.Group',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Radio.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.enum': dataSource,
|
||||
},
|
||||
operations: select.operations,
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
# Select - 下拉选择（单选）
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const select: FieldOptions = {
|
||||
name: 'select',
|
||||
type: 'object',
|
||||
group: 'choices',
|
||||
order: 2,
|
||||
title: '下拉选择（单选）',
|
||||
default: {
|
||||
dataType: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Select',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Select.DesignableBar',
|
||||
enum: [],
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.enum': dataSource,
|
||||
},
|
||||
operations: [
|
||||
{
|
||||
label: '等于',
|
||||
value: 'eq',
|
||||
selected: true,
|
||||
schema: { 'x-component': 'Select' },
|
||||
},
|
||||
{ label: '不等于', value: 'ne', schema: { 'x-component': 'Select' } },
|
||||
{
|
||||
label: '包含',
|
||||
value: 'in',
|
||||
schema: {
|
||||
'x-component': 'Select',
|
||||
'x-component-props': { mode: 'tags' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '不包含',
|
||||
value: 'notIn',
|
||||
schema: {
|
||||
'x-component': 'Select',
|
||||
'x-component-props': { mode: 'tags' },
|
||||
},
|
||||
},
|
||||
{ label: '非空', value: '$notNull', noValue: true },
|
||||
{ label: '为空', value: '$null', noValue: true },
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -1,4 +1,37 @@
|
||||
---
|
||||
group:
|
||||
path: /components/collection-fields
|
||||
---
|
||||
# String - 单行文本
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const string: FieldOptions = {
|
||||
name: 'string',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 1,
|
||||
title: '单行文本',
|
||||
sortable: true,
|
||||
default: {
|
||||
interface: 'string',
|
||||
dataType: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Input',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
operations: [
|
||||
{ label: '包含', value: '$includes', selected: true },
|
||||
{ label: '不包含', value: '$notIncludes' },
|
||||
{ label: '等于', value: 'eq' },
|
||||
{ label: '不等于', value: 'ne' },
|
||||
{ label: '非空', value: '$notNull', noValue: true },
|
||||
{ label: '为空', value: '$null', noValue: true },
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,45 @@
|
||||
# SubTable - 子表格
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const subTable: FieldOptions = {
|
||||
name: 'subTable',
|
||||
type: 'object',
|
||||
group: 'relation',
|
||||
order: 2,
|
||||
title: '子表格',
|
||||
isAssociation: true,
|
||||
disabled: true,
|
||||
default: {
|
||||
dataType: 'hasMany',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'array',
|
||||
// title,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Table',
|
||||
'x-component-props': {},
|
||||
'x-designable-bar': 'Table.DesignableBar',
|
||||
enum: [],
|
||||
},
|
||||
},
|
||||
initialize: (values: any) => {
|
||||
if (!values.target) {
|
||||
values.target = `t_${uid()}`;
|
||||
}
|
||||
if (!values.foreignKey) {
|
||||
values.foreignKey = `f_${uid()}`;
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
children: {
|
||||
type: 'array',
|
||||
title: '子表格字段',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'DatabaseField',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,27 @@
|
||||
# TextArea - 多行文本
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const textarea: FieldOptions = {
|
||||
name: 'textarea',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 2,
|
||||
title: '多行文本',
|
||||
default: {
|
||||
dataType: 'text',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input.TextArea',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,55 @@
|
||||
# Time - 时间
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const time: FieldOptions = {
|
||||
name: 'time',
|
||||
type: 'object',
|
||||
group: 'datetime',
|
||||
order: 2,
|
||||
title: '时间',
|
||||
sortable: true,
|
||||
default: {
|
||||
dataType: 'time',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'TimePicker',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'TimePicker.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
'uiSchema.x-component-props.format': {
|
||||
type: 'string',
|
||||
title: '时间格式',
|
||||
'x-component': 'Radio.Group',
|
||||
'x-decorator': 'FormItem',
|
||||
default: 'HH:mm:ss',
|
||||
enum: [
|
||||
{
|
||||
label: '24小时制',
|
||||
value: 'HH:mm:ss',
|
||||
},
|
||||
{
|
||||
label: '12小时制',
|
||||
value: 'hh:mm:ss a',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
operations: [
|
||||
{ label: '等于', value: 'eq', selected: true },
|
||||
{ label: '不等于', value: 'neq' },
|
||||
{ label: '大于', value: 'gt' },
|
||||
{ label: '大于等于', value: 'gte' },
|
||||
{ label: '小于', value: 'lt' },
|
||||
{ label: '小于等于', value: 'lte' },
|
||||
{ label: '非空', value: '$notNull', noValue: true },
|
||||
{ label: '为空', value: '$null', noValue: true },
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,33 @@
|
||||
# UpdatedAt - 最后更新时间
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const updatedAt: FieldOptions = {
|
||||
name: 'updatedAt',
|
||||
type: 'object',
|
||||
group: 'systemInfo',
|
||||
order: 2,
|
||||
title: '最后更新时间',
|
||||
sortable: true,
|
||||
default: {
|
||||
dataType: 'date',
|
||||
field: 'updated_at',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'datetime',
|
||||
title: '最后更新时间',
|
||||
'x-component': 'DatePicker',
|
||||
'x-component-props': {},
|
||||
'x-read-pretty': true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'DatePicker.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
...dateTimeProps,
|
||||
},
|
||||
operations: datetime.operations,
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,37 @@
|
||||
# UpdatedBy - 最后修改人
|
||||
|
||||
## Interface
|
||||
|
||||
```ts
|
||||
export const updatedBy: FieldOptions = {
|
||||
name: 'updatedBy',
|
||||
type: 'object',
|
||||
group: 'systemInfo',
|
||||
order: 4,
|
||||
title: '最后修改人',
|
||||
isAssociation: true,
|
||||
default: {
|
||||
dataType: 'belongsTo',
|
||||
target: 'users',
|
||||
foreignKey: 'updated_by_id',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'object',
|
||||
title: '最后修改人',
|
||||
'x-component': 'Select.Drawer',
|
||||
'x-component-props': {
|
||||
fieldNames: {
|
||||
value: 'id',
|
||||
label: 'nickname',
|
||||
},
|
||||
},
|
||||
'x-decorator': 'FormItem',
|
||||
'x-read-pretty': true,
|
||||
'x-designable-bar': 'Select.Drawer.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -13,3 +13,89 @@ There are a total of three types of client components for NocoBase.
|
||||
- Routing components created by createRouteSwitch, such as Layou, Page
|
||||
- Field components created by createCollectionField, which are used to extend fields
|
||||
- JSON Schema components created by createSchemaComponent, which can be anything, such as tables, forms, calendars, kanban, etc. Schema Component can be used in Route Component or Collection Field.
|
||||
|
||||
## Route Components
|
||||
|
||||
```js
|
||||
|
||||
function Hello() {
|
||||
return <div>Hello World</div>
|
||||
}
|
||||
|
||||
const RouteSwitch = createRouteSwitch({
|
||||
components: {
|
||||
Hello,
|
||||
},
|
||||
});
|
||||
|
||||
const routes = [
|
||||
{ path: '/hello', component: 'Hello' },
|
||||
];
|
||||
|
||||
<Router>
|
||||
<RouteSwitch routes={routes}/>
|
||||
</Router>
|
||||
```
|
||||
|
||||
## Schema Components
|
||||
|
||||
```js
|
||||
const Hello = () => {
|
||||
return <div>Hello</div>;
|
||||
}
|
||||
|
||||
const SchemaComponent = createSchemaComponent({
|
||||
components: {
|
||||
Hello,
|
||||
},
|
||||
});
|
||||
|
||||
<SchemaComponent
|
||||
schema={{
|
||||
type: 'void',
|
||||
'x-component': 'Hello',
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## Collection Fields
|
||||
|
||||
```ts
|
||||
const string: FieldOptions = {
|
||||
name: 'string',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 1,
|
||||
title: '单行文本',
|
||||
sortable: true,
|
||||
default: {
|
||||
interface: 'string',
|
||||
dataType: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Input',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
|
||||
},
|
||||
operations: [
|
||||
{ label: '包含', value: '$includes', selected: true },
|
||||
{ label: '不包含', value: '$notIncludes' },
|
||||
{ label: '等于', value: 'eq' },
|
||||
{ label: '不等于', value: 'ne' },
|
||||
{ label: '非空', value: '$notNull', noValue: true },
|
||||
{ label: '为空', value: '$null', noValue: true },
|
||||
],
|
||||
};
|
||||
|
||||
const CollectionField = createCollectionField({
|
||||
interface: {
|
||||
string,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
@ -15,3 +15,88 @@ NocoBase 的客户端组件总共有三类：
|
||||
- 通过 createSchemaComponent 创建的 JSON Schema 组件，可以是任意东西，比如表格、表单、日历、看板等。
|
||||
Schema Component 可用于 Route Component 或 Collection Field 中。
|
||||
|
||||
## 路由组件
|
||||
|
||||
```js
|
||||
|
||||
function Hello() {
|
||||
return <div>Hello World</div>
|
||||
}
|
||||
|
||||
const RouteSwitch = createRouteSwitch({
|
||||
components: {
|
||||
Hello,
|
||||
},
|
||||
});
|
||||
|
||||
const routes = [
|
||||
{ path: '/hello', component: 'Hello' },
|
||||
];
|
||||
|
||||
<Router>
|
||||
<RouteSwitch routes={routes}/>
|
||||
</Router>
|
||||
```
|
||||
|
||||
## Schema 组件
|
||||
|
||||
```js
|
||||
const Hello = () => {
|
||||
return <div>Hello</div>;
|
||||
}
|
||||
|
||||
const SchemaComponent = createSchemaComponent({
|
||||
components: {
|
||||
Hello,
|
||||
},
|
||||
});
|
||||
|
||||
<SchemaComponent
|
||||
schema={{
|
||||
type: 'void',
|
||||
'x-component': 'Hello',
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## 字段组件
|
||||
|
||||
```ts
|
||||
const string: FieldOptions = {
|
||||
name: 'string',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 1,
|
||||
title: '单行文本',
|
||||
sortable: true,
|
||||
default: {
|
||||
interface: 'string',
|
||||
dataType: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Input',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
|
||||
},
|
||||
operations: [
|
||||
{ label: '包含', value: '$includes', selected: true },
|
||||
{ label: '不包含', value: '$notIncludes' },
|
||||
{ label: '等于', value: 'eq' },
|
||||
{ label: '不等于', value: 'ne' },
|
||||
{ label: '非空', value: '$notNull', noValue: true },
|
||||
{ label: '为空', value: '$null', noValue: true },
|
||||
],
|
||||
};
|
||||
|
||||
const CollectionField = createCollectionField({
|
||||
interface: {
|
||||
string,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
@ -1,481 +0,0 @@
|
||||
---
|
||||
group:
|
||||
title: Schema Components
|
||||
path: /components/schema-components
|
||||
order: 2
|
||||
---
|
||||
|
||||
# Action - 操作
|
||||
|
||||
## Node Tree
|
||||
|
||||
<pre lang="tsx">
|
||||
////////// 单节点 //////////
|
||||
|
||||
// 常规按钮操作
|
||||
<Action/>
|
||||
// 内链
|
||||
<Action.Link/>
|
||||
// 外链
|
||||
<Action.URL/>
|
||||
|
||||
////////// 弹出层相关操作 //////////
|
||||
|
||||
// 对话框
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Modal title={'对话框标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Modal>
|
||||
</Action>
|
||||
|
||||
// 抽屉
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Drawer title={'抽屉标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Drawer>
|
||||
</Action>
|
||||
|
||||
// 气泡
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Popover title={'气泡标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Popover>
|
||||
</Action>
|
||||
|
||||
// 指定容器
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Container>
|
||||
// 添加其他节点
|
||||
</Action.Container>
|
||||
</Action>
|
||||
|
||||
////////// 操作分组 //////////
|
||||
|
||||
// 下拉操作
|
||||
<Action.Dropdown>
|
||||
<Action/>
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Modal title={'对话框标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Modal>
|
||||
</Action>
|
||||
</Action.Dropdown>
|
||||
</pre>
|
||||
|
||||
## Designable Bar
|
||||
|
||||
- Action.DesignableBar
|
||||
- Action.Modal.DesignableBar
|
||||
- Action.Drawer.DesignableBar
|
||||
- Action.Popover.DesignableBar
|
||||
|
||||
## Examples
|
||||
|
||||
### Action
|
||||
|
||||
```tsx
|
||||
/**
|
||||
* title: 按钮操作
|
||||
* desc: 可以通过配置 `useAction` 来处理操作逻辑
|
||||
*/
|
||||
import React from 'react';
|
||||
// @ts-ignore
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
function useAction() {
|
||||
return {
|
||||
run() {
|
||||
alert('这是自定义的操作逻辑');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
useAction: '{{ useAction }}',
|
||||
tooltip: '提示信息',
|
||||
confirm: {
|
||||
title: 'Do you Want to delete these items?',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
debug={true}
|
||||
scope={{ useAction }}
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Modal
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'ModalForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Drawer
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-component': 'Action.Drawer',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'DrawerForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Drawer',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Dropdown
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '下拉菜单',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
dropdown1: {
|
||||
type: 'void',
|
||||
'x-component': 'Action.Dropdown',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
item1: {
|
||||
type: 'void',
|
||||
title: `操作1`,
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component': 'Menu.Action',
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-component-props': {
|
||||
addNewComponent: 'AddNew.FormItem',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
item2: {
|
||||
type: 'void',
|
||||
title: `操作2`,
|
||||
'x-designable-bar': 'Menu.DesignableBar',
|
||||
'x-component': 'Menu.Action',
|
||||
properties: {
|
||||
modal2: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
debug={true}
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Popover
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-component': 'Action.Popover',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'PopoverForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Popover',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Group
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'group1',
|
||||
'x-component': 'Action.Group',
|
||||
properties: {
|
||||
a1: {
|
||||
type: 'void',
|
||||
title: '按钮1',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {},
|
||||
},
|
||||
a2: {
|
||||
type: 'void',
|
||||
title: '按钮2',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Bar
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'actionbar1',
|
||||
'x-component': 'Action.Bar',
|
||||
'x-designable-bar': 'Action.Bar.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
@ -1 +0,0 @@
|
||||
# AddNew
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
title: Input
|
||||
group:
|
||||
path: /components/schema-components
|
||||
---
|
||||
@ -130,7 +130,7 @@ const routes = [
|
||||
function AntdProvider(props) {
|
||||
// The locale here can be handled dynamically depending on the i18next
|
||||
return (
|
||||
<ConfigProvider locale={locale}>{props.children}</ConfigProvider
|
||||
<ConfigProvider locale={locale}>{props.children}</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -138,9 +138,9 @@ const App = () => {
|
||||
return (
|
||||
<APIClientProvider client={apiClient}>
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<AntdProvider
|
||||
<Router
|
||||
<RouteSwitch routes=[routes]/>
|
||||
<AntdProvider>
|
||||
<Router>
|
||||
<RouteSwitch routes={routes}/>
|
||||
</Router>
|
||||
</AntdProvider>
|
||||
</I18nextProvider>
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
---
|
||||
title: Action - 操作
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
title: Schema Components
|
||||
path: /components/schema-components
|
||||
order: 2
|
||||
---
|
||||
|
||||
# Action - 操作
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
---
|
||||
nav:
|
||||
path: /zh-CN/components
|
||||
group:
|
||||
title: Schema 组件
|
||||
path: /zh-CN/components/schema-components
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: AddNew - 添加
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# AddNew - 添加
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: BlockItem - 区块项
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# BlockItem - 区块项
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Calendar - 日历
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Calendar - 日历
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Cascader - 级联选择
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Cascader - 级联选择
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
---
|
||||
title: Chart - 图表
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
---
|
||||
title: Checkbox - 多选框
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
|
||||
# Checkbox - 多选框
|
||||
|
||||
## Node Tree
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: ColorSelect - 颜色选择器
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# ColorSelect - 颜色选择器
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: DatabaseField - 数据表字段
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# DatabaseField - 数据表字段
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: DatePicker - 日期选择器
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# DatePicker - 日期选择器
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: DesignableBar - 配置操作栏
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# DesignableBar - 配置操作栏
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Filter - 筛选器
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Filter - 筛选器
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: FormItem - 表单项
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# FormItem - 表单项
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Form - 表单
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Form - 表单
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Grid - 栅格
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 2
|
||||
title: Blocks
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Grid - 栅格
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: IconPicker - 图标选择器
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# IconPicker - 图标选择器
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: InputNumber - 数字框
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# InputNumber - 数字框
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Input - 输入框
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Input - 输入框
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Kanban - 看板
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Kanban - 看板
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Markdown 编辑器
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Markdown 编辑器
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Menu - 菜单
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Menu - 菜单
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Password - 密码
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Password - 密码
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Radio - 单选框
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Radio - 单选框
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Select - 选择器
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Select - 选择器
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Table - 表格
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Table - 表格
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Tabs - 标签页
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Tabs - 标签页
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: TimePicker - 时间选择器
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# TimePicker - 时间选择器
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
---
|
||||
title: Upload - 上传
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
path: /components
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
path: /components/schema-components
|
||||
---
|
||||
|
||||
# Upload - 上传
|
||||
|
||||
Loading…
Reference in New Issue
Block a user