mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-01 03:28:20 +08:00
feat: page 组件完善属性配置面板
Change-Id: Ida966e98b03d59ff4de46063958c5762ca4aa90e
This commit is contained in:
jiatianqi
parent
7908bdfe76
commit
e1772ceb19
@ -1,13 +1,13 @@
|
||||
import {ContainerWrapper} from 'amis-editor-core';
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
|
||||
import {getSchemaTpl} from 'amis-editor-core';
|
||||
import {BaseEventContext, BasePlugin, getSchemaTpl, defaultValue} from 'amis-editor-core';
|
||||
import {getEventControlConfig} from '../renderer/event-control/helper';
|
||||
import {
|
||||
RendererPluginAction,
|
||||
RendererPluginEvent
|
||||
} from 'amis-editor-core';
|
||||
import type {SchemaObject} from 'amis/lib/Schema';
|
||||
import { tipedLabel } from '../component/BaseControl';
|
||||
|
||||
export class PagePlugin extends BasePlugin {
|
||||
// 关联渲染器名字
|
||||
@ -26,6 +26,9 @@ export class PagePlugin extends BasePlugin {
|
||||
// pluginIcon = 'page-plugin'; // 暂无新 icon
|
||||
scaffold: SchemaObject = {
|
||||
type: 'page',
|
||||
regions: [
|
||||
"body"
|
||||
],
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
@ -90,170 +93,168 @@ export class PagePlugin extends BasePlugin {
|
||||
wrapper = ContainerWrapper;
|
||||
|
||||
panelTitle = '页面';
|
||||
panelJustify = true;
|
||||
|
||||
panelBodyCreator = (context: BaseEventContext) => {
|
||||
return [
|
||||
getSchemaTpl('tabs', [
|
||||
{
|
||||
title: '常规',
|
||||
title: '属性',
|
||||
body: [
|
||||
{
|
||||
type: 'checkboxes',
|
||||
name: 'regions',
|
||||
label: '区域展示',
|
||||
pipeIn: (value: any) =>
|
||||
Array.isArray(value)
|
||||
? value
|
||||
: ['auto', 'body', 'toolbar', 'aside', 'header'],
|
||||
pipeOut: (value: any) => {
|
||||
return Array.isArray(value) && ~value.indexOf('auto')
|
||||
? undefined
|
||||
: value.length
|
||||
? value
|
||||
: ['auto', 'body', 'toolbar', 'aside', 'header'];
|
||||
getSchemaTpl('collapseGroup', [
|
||||
{
|
||||
title: '基本',
|
||||
body: [
|
||||
{
|
||||
type: 'checkboxes',
|
||||
name: 'regions',
|
||||
label: '区域展示',
|
||||
pipeIn: (value: any) =>
|
||||
Array.isArray(value)
|
||||
? value
|
||||
: ['body', 'toolbar', 'aside', 'header'],
|
||||
pipeOut: (value: any) => {
|
||||
return Array.isArray(value) && value.length ?
|
||||
value
|
||||
: ['body', 'toolbar', 'aside', 'header'];
|
||||
},
|
||||
joinValues: false,
|
||||
extractValue: true,
|
||||
inline: false,
|
||||
options: [
|
||||
{
|
||||
label: '内容区',
|
||||
value: 'body',
|
||||
},
|
||||
{
|
||||
label: '标题栏',
|
||||
value: 'header',
|
||||
},
|
||||
{
|
||||
label: '工具栏',
|
||||
value: 'toolbar',
|
||||
},
|
||||
{
|
||||
label: '边栏',
|
||||
value: 'aside',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '页面标题',
|
||||
name: 'title',
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
label: '副标题',
|
||||
name: 'subTitle',
|
||||
type: 'textarea'
|
||||
},
|
||||
getSchemaTpl('remark', {
|
||||
label: '标题提示',
|
||||
hiddenOn: 'data.regions && !data.regions.includes("header") || !data.title'
|
||||
}),
|
||||
{
|
||||
type: 'ae-Switch-More',
|
||||
name: 'asideResizor',
|
||||
mode: 'normal',
|
||||
label: '边栏宽度可调节',
|
||||
hiddenOn: 'data.regions && !data.regions.includes("aside")',
|
||||
value: false,
|
||||
hiddenOnDefault: true,
|
||||
formType: 'extend',
|
||||
form: {
|
||||
body: [
|
||||
{
|
||||
type: 'input-number',
|
||||
label: '最小宽度',
|
||||
min: 0,
|
||||
name: 'asideMinWidth',
|
||||
pipeIn: defaultValue(160),
|
||||
pipeOut: (value:any) => value || 0
|
||||
},
|
||||
{
|
||||
type: 'input-number',
|
||||
label: '最大宽度',
|
||||
min:0,
|
||||
name: 'asideMaxWidth',
|
||||
pipeIn: defaultValue(350),
|
||||
pipeOut: (value:any) => value || 0
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
label: tipedLabel(
|
||||
'边栏固定',
|
||||
'边栏内容是否固定，即不跟随内容区滚动'
|
||||
),
|
||||
name: 'asideSticky',
|
||||
inputClassName: 'is-inline',
|
||||
pipeIn: defaultValue(true),
|
||||
hiddenOn: 'data.regions && !data.regions.includes("aside")'
|
||||
}
|
||||
]
|
||||
},
|
||||
joinValues: false,
|
||||
extractValue: true,
|
||||
inline: false,
|
||||
options: [
|
||||
{
|
||||
label: '自动',
|
||||
value: 'auto'
|
||||
},
|
||||
{
|
||||
label: '内容区',
|
||||
value: 'body',
|
||||
disabledOn:
|
||||
'!Array.isArray(this.regions) || ~this.regions.indexOf("auto")'
|
||||
},
|
||||
{
|
||||
label: '边栏',
|
||||
value: 'aside',
|
||||
disabledOn:
|
||||
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
|
||||
},
|
||||
{
|
||||
label: '工具栏',
|
||||
value: 'toolbar',
|
||||
disabledOn:
|
||||
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
|
||||
},
|
||||
{
|
||||
label: '顶部',
|
||||
value: 'header',
|
||||
disabledOn:
|
||||
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
label: '标题',
|
||||
name: 'title',
|
||||
type: 'input-text'
|
||||
},
|
||||
|
||||
{
|
||||
label: '副标题',
|
||||
name: 'subTitle',
|
||||
type: 'input-text'
|
||||
},
|
||||
|
||||
{
|
||||
label: '提示',
|
||||
name: 'remark',
|
||||
type: 'textarea',
|
||||
visibleOn: 'this.title',
|
||||
description:
|
||||
'标题附近会出现一个提示图标，鼠标放上去会提示该内容。'
|
||||
},
|
||||
getSchemaTpl('data')
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: '接口',
|
||||
body: [
|
||||
getSchemaTpl('api', {
|
||||
label: '数据初始化接口',
|
||||
name: 'initApi',
|
||||
sampleBuilder: (schema: any) => `{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
|
||||
data: {
|
||||
// 示例数据
|
||||
"id": 1,
|
||||
"a": "sample"
|
||||
}
|
||||
}`
|
||||
}),
|
||||
|
||||
getSchemaTpl('initFetch'),
|
||||
|
||||
getSchemaTpl('switch', {
|
||||
label: '开启定时刷新',
|
||||
name: 'interval',
|
||||
visibleOn: 'data.initApi',
|
||||
pipeIn: (value: any) => !!value,
|
||||
pipeOut: (value: any) => (value ? 3000 : undefined)
|
||||
}),
|
||||
|
||||
{
|
||||
name: 'interval',
|
||||
type: 'input-number',
|
||||
visibleOn: 'typeof this.interval === "number"',
|
||||
step: 500
|
||||
},
|
||||
|
||||
getSchemaTpl('switch', {
|
||||
name: 'silentPolling',
|
||||
label: '静默刷新',
|
||||
visibleOn: '!!data.interval',
|
||||
description: '设置自动定时刷新时是否显示loading'
|
||||
}),
|
||||
|
||||
{
|
||||
name: 'stopAutoRefreshWhen',
|
||||
label: '停止定时刷新检测表达式',
|
||||
type: 'input-text',
|
||||
visibleOn: '!!data.interval',
|
||||
description:
|
||||
'定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
|
||||
},
|
||||
|
||||
{
|
||||
label: '默认消息提示',
|
||||
type: 'combo',
|
||||
name: 'messages',
|
||||
multiLine: true,
|
||||
description:
|
||||
'设置 ajax 默认提示信息，当 ajax 没有返回 msg 信息时有用，如果 ajax 返回携带了 msg 值，则还是以 ajax 返回为主',
|
||||
items: [
|
||||
{
|
||||
label: '获取成功提示',
|
||||
type: 'input-text',
|
||||
name: 'fetchSuccess'
|
||||
},
|
||||
|
||||
{
|
||||
label: '获取失败提示',
|
||||
type: 'input-text',
|
||||
name: 'fetchFailed'
|
||||
},
|
||||
|
||||
{
|
||||
label: '保存成功提示',
|
||||
type: 'input-text',
|
||||
name: 'saveSuccess'
|
||||
},
|
||||
|
||||
{
|
||||
label: '保存失败提示',
|
||||
type: 'input-text',
|
||||
name: 'saveFailed'
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
title: '数据',
|
||||
body: [
|
||||
// getSchemaTpl('combo-container', {
|
||||
// type: 'input-kv',
|
||||
// mode: 'normal',
|
||||
// name: 'data',
|
||||
// label: '初始化静态数据'
|
||||
// }),
|
||||
getSchemaTpl('apiControl', {
|
||||
name: 'initApi',
|
||||
label: tipedLabel(
|
||||
'初始化接口',
|
||||
'用来获取初始数据的 api, 返回的数据可以整个 page 级别使用'
|
||||
)
|
||||
})
|
||||
]
|
||||
},
|
||||
,
|
||||
{
|
||||
title: '移动端',
|
||||
body: [
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'pullRefresh',
|
||||
mode: 'normal',
|
||||
noBorder: true,
|
||||
items: [
|
||||
{
|
||||
type: 'ae-Switch-More',
|
||||
mode: 'normal',
|
||||
label: '下拉刷新',
|
||||
name: 'disabled',
|
||||
formType: 'extend',
|
||||
value: true,
|
||||
trueValue: false,
|
||||
falseValue: true,
|
||||
autoFocus: false,
|
||||
form: {
|
||||
body: [
|
||||
{
|
||||
name: 'pullingText',
|
||||
label: tipedLabel('下拉文案', '下拉过程提示文案'),
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
name: 'loosingText',
|
||||
label: tipedLabel('释放文案', '释放过程提示文案'),
|
||||
type: 'input-text'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -262,26 +263,26 @@ export class PagePlugin extends BasePlugin {
|
||||
body: [
|
||||
getSchemaTpl('collapseGroup', [
|
||||
...getSchemaTpl('style:common'),
|
||||
getSchemaTpl('style:className', {
|
||||
getSchemaTpl('style:classNames', {
|
||||
isFormItem: false,
|
||||
schema: [
|
||||
getSchemaTpl('className', {
|
||||
name: 'headerClassName',
|
||||
label: '头部CSS类名'
|
||||
label: '顶部'
|
||||
}),
|
||||
getSchemaTpl('className', {
|
||||
name: 'bodyClassName',
|
||||
label: '内容CSS类名'
|
||||
label: '内容区'
|
||||
}),
|
||||
|
||||
getSchemaTpl('className', {
|
||||
name: 'asideClassName',
|
||||
label: '边栏CSS类名'
|
||||
label: '边栏'
|
||||
}),
|
||||
|
||||
getSchemaTpl('className', {
|
||||
name: 'toolbarClassName',
|
||||
label: '工具栏CSS类名'
|
||||
label: '工具栏'
|
||||
})
|
||||
]
|
||||
})
|
||||
@ -297,100 +298,65 @@ export class PagePlugin extends BasePlugin {
|
||||
...getEventControlConfig(this.manager, context)
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
body: [
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'pullRefresh',
|
||||
multiLine: true,
|
||||
noBorder: true,
|
||||
items: [
|
||||
{
|
||||
type: 'switch',
|
||||
label: '移动端下拉刷新',
|
||||
name: 'disabled',
|
||||
mode: 'horizontal',
|
||||
horizontal: {
|
||||
justify: true,
|
||||
left: 8
|
||||
},
|
||||
inputClassName: 'is-inline ',
|
||||
trueValue: false,
|
||||
falseValue: true
|
||||
},
|
||||
{
|
||||
name: 'pullingText',
|
||||
label: '下拉过程提示文案',
|
||||
type: 'input-text',
|
||||
visibleOn: '!this.disabled'
|
||||
},
|
||||
{
|
||||
name: 'loosingText',
|
||||
label: '释放过程提示文案',
|
||||
type: 'input-text',
|
||||
visibleOn: '!this.disabled'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// {
|
||||
// type: 'combo',
|
||||
// name: 'definitions',
|
||||
// multiple: true,
|
||||
// multiLine: true,
|
||||
// label: '定义',
|
||||
// description: '定义类型，定义完成后可被子节点引用。',
|
||||
// pipeIn: (value: any) =>
|
||||
// value
|
||||
// ? Object.keys(value).map(key => ({
|
||||
// key,
|
||||
// value: value[key]
|
||||
// }))
|
||||
// : [],
|
||||
// pipeOut: (value: any) =>
|
||||
// Array.isArray(value)
|
||||
// ? value.reduce(
|
||||
// (obj, current) => ({
|
||||
// ...obj,
|
||||
// [current.key || '']: current.value
|
||||
// ? current.value
|
||||
// : {type: 'tpl', tpl: '内容'}
|
||||
// }),
|
||||
// {}
|
||||
// )
|
||||
// : undefined,
|
||||
// items: [
|
||||
// {
|
||||
// type: 'input-text',
|
||||
// name: 'key',
|
||||
// label: 'Key',
|
||||
// required: true
|
||||
// },
|
||||
|
||||
// {
|
||||
// children: ({index}: any) => (
|
||||
// <Button
|
||||
// size="sm"
|
||||
// level="danger"
|
||||
// // onClick={this.handleEditDefinitionDetail.bind(
|
||||
// // this,
|
||||
// // index
|
||||
// // )}
|
||||
// block
|
||||
// >
|
||||
// 配置详情
|
||||
// </Button>
|
||||
// )
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
]
|
||||
}
|
||||
|
||||
// {
|
||||
// type: 'combo',
|
||||
// name: 'definitions',
|
||||
// multiple: true,
|
||||
// multiLine: true,
|
||||
// label: '定义',
|
||||
// description: '定义类型，定义完成后可被子节点引用。',
|
||||
// pipeIn: (value: any) =>
|
||||
// value
|
||||
// ? Object.keys(value).map(key => ({
|
||||
// key,
|
||||
// value: value[key]
|
||||
// }))
|
||||
// : [],
|
||||
// pipeOut: (value: any) =>
|
||||
// Array.isArray(value)
|
||||
// ? value.reduce(
|
||||
// (obj, current) => ({
|
||||
// ...obj,
|
||||
// [current.key || '']: current.value
|
||||
// ? current.value
|
||||
// : {type: 'tpl', tpl: '内容'}
|
||||
// }),
|
||||
// {}
|
||||
// )
|
||||
// : undefined,
|
||||
// items: [
|
||||
// {
|
||||
// type: 'input-text',
|
||||
// name: 'key',
|
||||
// label: 'Key',
|
||||
// required: true
|
||||
// },
|
||||
|
||||
// {
|
||||
// children: ({index}: any) => (
|
||||
// <Button
|
||||
// size="sm"
|
||||
// level="danger"
|
||||
// // onClick={this.handleEditDefinitionDetail.bind(
|
||||
// // this,
|
||||
// // index
|
||||
// // )}
|
||||
// block
|
||||
// >
|
||||
// 配置详情
|
||||
// </Button>
|
||||
// )
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
])
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(PagePlugin);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user