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 {ContainerWrapper} from 'amis-editor-core';
|
||||||
import {registerEditorPlugin} from 'amis-editor-core';
|
import {registerEditorPlugin} from 'amis-editor-core';
|
||||||
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
|
import {BaseEventContext, BasePlugin, getSchemaTpl, defaultValue} from 'amis-editor-core';
|
||||||
import {getSchemaTpl} from 'amis-editor-core';
|
|
||||||
import {getEventControlConfig} from '../renderer/event-control/helper';
|
import {getEventControlConfig} from '../renderer/event-control/helper';
|
||||||
import {
|
import {
|
||||||
RendererPluginAction,
|
RendererPluginAction,
|
||||||
RendererPluginEvent
|
RendererPluginEvent
|
||||||
} from 'amis-editor-core';
|
} from 'amis-editor-core';
|
||||||
import type {SchemaObject} from 'amis/lib/Schema';
|
import type {SchemaObject} from 'amis/lib/Schema';
|
||||||
|
import { tipedLabel } from '../component/BaseControl';
|
||||||
|
|
||||||
export class PagePlugin extends BasePlugin {
|
export class PagePlugin extends BasePlugin {
|
||||||
// 关联渲染器名字
|
// 关联渲染器名字
|
||||||
@ -26,6 +26,9 @@ export class PagePlugin extends BasePlugin {
|
|||||||
// pluginIcon = 'page-plugin'; // 暂无新 icon
|
// pluginIcon = 'page-plugin'; // 暂无新 icon
|
||||||
scaffold: SchemaObject = {
|
scaffold: SchemaObject = {
|
||||||
type: 'page',
|
type: 'page',
|
||||||
|
regions: [
|
||||||
|
"body"
|
||||||
|
],
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: 'tpl',
|
type: 'tpl',
|
||||||
@ -90,170 +93,168 @@ export class PagePlugin extends BasePlugin {
|
|||||||
wrapper = ContainerWrapper;
|
wrapper = ContainerWrapper;
|
||||||
|
|
||||||
panelTitle = '页面';
|
panelTitle = '页面';
|
||||||
|
panelJustify = true;
|
||||||
|
|
||||||
panelBodyCreator = (context: BaseEventContext) => {
|
panelBodyCreator = (context: BaseEventContext) => {
|
||||||
return [
|
return [
|
||||||
getSchemaTpl('tabs', [
|
getSchemaTpl('tabs', [
|
||||||
{
|
{
|
||||||
title: '常规',
|
title: '属性',
|
||||||
body: [
|
body: [
|
||||||
{
|
getSchemaTpl('collapseGroup', [
|
||||||
type: 'checkboxes',
|
{
|
||||||
name: 'regions',
|
title: '基本',
|
||||||
label: '区域展示',
|
body: [
|
||||||
pipeIn: (value: any) =>
|
{
|
||||||
Array.isArray(value)
|
type: 'checkboxes',
|
||||||
? value
|
name: 'regions',
|
||||||
: ['auto', 'body', 'toolbar', 'aside', 'header'],
|
label: '区域展示',
|
||||||
pipeOut: (value: any) => {
|
pipeIn: (value: any) =>
|
||||||
return Array.isArray(value) && ~value.indexOf('auto')
|
Array.isArray(value)
|
||||||
? undefined
|
? value
|
||||||
: value.length
|
: ['body', 'toolbar', 'aside', 'header'],
|
||||||
? value
|
pipeOut: (value: any) => {
|
||||||
: ['auto', 'body', 'toolbar', 'aside', 'header'];
|
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,
|
title: '数据',
|
||||||
inline: false,
|
body: [
|
||||||
options: [
|
// getSchemaTpl('combo-container', {
|
||||||
{
|
// type: 'input-kv',
|
||||||
label: '自动',
|
// mode: 'normal',
|
||||||
value: 'auto'
|
// name: 'data',
|
||||||
},
|
// label: '初始化静态数据'
|
||||||
{
|
// }),
|
||||||
label: '内容区',
|
getSchemaTpl('apiControl', {
|
||||||
value: 'body',
|
name: 'initApi',
|
||||||
disabledOn:
|
label: tipedLabel(
|
||||||
'!Array.isArray(this.regions) || ~this.regions.indexOf("auto")'
|
'初始化接口',
|
||||||
},
|
'用来获取初始数据的 api, 返回的数据可以整个 page 级别使用'
|
||||||
{
|
)
|
||||||
label: '边栏',
|
})
|
||||||
value: 'aside',
|
]
|
||||||
disabledOn:
|
},
|
||||||
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
|
,
|
||||||
},
|
{
|
||||||
{
|
title: '移动端',
|
||||||
label: '工具栏',
|
body: [
|
||||||
value: 'toolbar',
|
{
|
||||||
disabledOn:
|
type: 'combo',
|
||||||
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
|
name: 'pullRefresh',
|
||||||
},
|
mode: 'normal',
|
||||||
{
|
noBorder: true,
|
||||||
label: '顶部',
|
items: [
|
||||||
value: 'header',
|
{
|
||||||
disabledOn:
|
type: 'ae-Switch-More',
|
||||||
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
|
mode: 'normal',
|
||||||
}
|
label: '下拉刷新',
|
||||||
]
|
name: 'disabled',
|
||||||
},
|
formType: 'extend',
|
||||||
|
value: true,
|
||||||
{
|
trueValue: false,
|
||||||
label: '标题',
|
falseValue: true,
|
||||||
name: 'title',
|
autoFocus: false,
|
||||||
type: 'input-text'
|
form: {
|
||||||
},
|
body: [
|
||||||
|
{
|
||||||
{
|
name: 'pullingText',
|
||||||
label: '副标题',
|
label: tipedLabel('下拉文案', '下拉过程提示文案'),
|
||||||
name: 'subTitle',
|
type: 'input-text'
|
||||||
type: 'input-text'
|
},
|
||||||
},
|
{
|
||||||
|
name: 'loosingText',
|
||||||
{
|
label: tipedLabel('释放文案', '释放过程提示文案'),
|
||||||
label: '提示',
|
type: 'input-text'
|
||||||
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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -262,26 +263,26 @@ export class PagePlugin extends BasePlugin {
|
|||||||
body: [
|
body: [
|
||||||
getSchemaTpl('collapseGroup', [
|
getSchemaTpl('collapseGroup', [
|
||||||
...getSchemaTpl('style:common'),
|
...getSchemaTpl('style:common'),
|
||||||
getSchemaTpl('style:className', {
|
getSchemaTpl('style:classNames', {
|
||||||
isFormItem: false,
|
isFormItem: false,
|
||||||
schema: [
|
schema: [
|
||||||
getSchemaTpl('className', {
|
getSchemaTpl('className', {
|
||||||
name: 'headerClassName',
|
name: 'headerClassName',
|
||||||
label: '头部CSS类名'
|
label: '顶部'
|
||||||
}),
|
}),
|
||||||
getSchemaTpl('className', {
|
getSchemaTpl('className', {
|
||||||
name: 'bodyClassName',
|
name: 'bodyClassName',
|
||||||
label: '内容CSS类名'
|
label: '内容区'
|
||||||
}),
|
}),
|
||||||
|
|
||||||
getSchemaTpl('className', {
|
getSchemaTpl('className', {
|
||||||
name: 'asideClassName',
|
name: 'asideClassName',
|
||||||
label: '边栏CSS类名'
|
label: '边栏'
|
||||||
}),
|
}),
|
||||||
|
|
||||||
getSchemaTpl('className', {
|
getSchemaTpl('className', {
|
||||||
name: 'toolbarClassName',
|
name: 'toolbarClassName',
|
||||||
label: '工具栏CSS类名'
|
label: '工具栏'
|
||||||
})
|
})
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
@ -297,100 +298,65 @@ export class PagePlugin extends BasePlugin {
|
|||||||
...getEventControlConfig(this.manager, context)
|
...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);
|
registerEditorPlugin(PagePlugin);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user