From 63153d5dff5a0ddf92f94dfde5881d003344a6bf Mon Sep 17 00:00:00 2001 From: zhangzhulei Date: Thu, 18 Aug 2022 17:03:56 +0800 Subject: [PATCH] =?UTF-8?q?amis-saas-6024=20[Improvement.]=20[=E5=BC=B9?= =?UTF-8?q?=E7=AA=97/=E6=8A=BD=E5=B1=89]=20=20=E5=AE=BD=E5=BA=A6=EF=BC=8C?= =?UTF-8?q?=E9=AB=98=E5=BA=A6=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I00a37e46b4671f644926fab9aacefafb4f7e955f --- packages/amis-editor/src/plugin/Dialog.tsx | 58 +++++++------ packages/amis-editor/src/plugin/Drawer.tsx | 96 +++++++++++----------- packages/amis-editor/src/tpl/style.tsx | 33 +++++++- 3 files changed, 110 insertions(+), 77 deletions(-) diff --git a/packages/amis-editor/src/plugin/Dialog.tsx b/packages/amis-editor/src/plugin/Dialog.tsx index 53a050c91..3e93483bc 100644 --- a/packages/amis-editor/src/plugin/Dialog.tsx +++ b/packages/amis-editor/src/plugin/Dialog.tsx @@ -6,7 +6,8 @@ import { RegionConfig, RendererInfo, getSchemaTpl, - noop + noop, + defaultValue } from 'amis-editor-core'; import {cloneDeep, assign} from 'lodash'; import {getEventControlConfig} from '../renderer/event-control/helper'; @@ -99,31 +100,6 @@ export class DialogPlugin extends BasePlugin { type: 'input-text', name: 'title' }, - { - label: '尺寸', - type: 'button-group-select', - value: 'md', - name: 'size', - size: 'sm', - options: [ - { - label: '小', - value: 'sm' - }, - { - label: '中', - value: 'md' - }, - { - label: '大', - value: 'lg' - }, - { - label: '超大', - value: 'xl' - } - ] - }, getSchemaTpl('switch', { label: '展示关闭按钮', name: 'showCloseButton', @@ -152,6 +128,36 @@ export class DialogPlugin extends BasePlugin { { title: '外观', body: getSchemaTpl('collapseGroup', [ + { + title: '基本', + body: [ + { + label: '尺寸', + type: 'button-group-select', + name: 'size', + size: 'sm', + options: [ + { + label: '小', + value: 'sm' + }, + { + label: '中', + value: 'md' + }, + { + label: '大', + value: 'lg' + }, + { + label: '超大', + value: 'xl' + } + ], + pipeIn: defaultValue('md') + } + ] + }, { title: 'CSS类名', body: [ diff --git a/packages/amis-editor/src/plugin/Drawer.tsx b/packages/amis-editor/src/plugin/Drawer.tsx index 26e90f850..a53d08e0a 100644 --- a/packages/amis-editor/src/plugin/Drawer.tsx +++ b/packages/amis-editor/src/plugin/Drawer.tsx @@ -8,7 +8,6 @@ import { getSchemaTpl, noop } from 'amis-editor-core'; -import {assign, cloneDeep} from 'lodash'; import {getEventControlConfig} from '../renderer/event-control/helper'; import {InlineModal} from './Dialog'; import {tipedLabel} from '../component/BaseControl'; @@ -104,7 +103,6 @@ export class DrawerPlugin extends BasePlugin { type: 'button-group-select', name: 'position', label: '位置', - value: 'right', mode: 'horizontal', options: [ { @@ -123,37 +121,8 @@ export class DrawerPlugin extends BasePlugin { label: '下', value: 'bottom' } - ] - }, - { - type: 'button-group-select', - name: 'size', - label: '尺寸', - value: 'md', - size: 'sm', - mode: 'horizontal', - options: [ - { - label: '超小', - value: 'xs' - }, - { - label: '小', - value: 'sm' - }, - { - label: '中', - value: 'md' - }, - { - label: '大', - value: 'lg' - }, - { - label: '超大', - value: 'xl' - } - ] + ], + pipeIn: defaultValue('right') }, getSchemaTpl('switch', { name: 'overlay', @@ -190,24 +159,51 @@ export class DrawerPlugin extends BasePlugin { title: '基本', body: [ { - type: 'input-text', - name: 'width', - label: tipedLabel( - '宽度', - '位置为 "左" 或 "右" 时生效。 默认宽度为"尺寸"字段配置的宽度，值单位默认为 px，也支持百分比等单位 ，如：100%' - ), - disabledOn: 'this.position === "top" || this.position === "bottom"', - tooltip: '位置为 为 "左" 或 "右" 时生效' + type: 'button-group-select', + name: 'size', + label: '尺寸', + size: 'sm', + mode: 'horizontal', + options: [ + { + label: '超小', + value: 'xs' + }, + { + label: '小', + value: 'sm' + }, + { + label: '中', + value: 'md' + }, + { + label: '大', + value: 'lg' + }, + { + label: '超大', + value: 'xl' + } + ], + pipeIn: defaultValue('md') }, - { - type: 'input-text', - name: 'height', - label: tipedLabel( - '高度', - '位置为 "上" 或 "下" 时生效。 默认宽度为"尺寸"字段配置的高度，值单位默认为 px，也支持百分比等单位 ，如：100%' - ), - disabledOn: 'this.position === "left" || this.position === "right"' - } + getSchemaTpl('style:widthHeight', { + widthSchema: { + label: tipedLabel( + '宽度', + '位置为 "左" 或 "右" 时生效。 默认宽度为"尺寸"字段配置的宽度，值单位默认为 px，也支持百分比等单位 ，如：100%' + ), + disabledOn: 'this.position === "top" || this.position === "bottom"' + }, + heightSchema: { + label: tipedLabel( + '高度', + '位置为 "上" 或 "下" 时生效。 默认宽度为"尺寸"字段配置的高度，值单位默认为 px，也支持百分比等单位 ，如：100%' + ), + disabledOn: 'this.position === "left" || this.position === "right"' + } + }) ] }, { diff --git a/packages/amis-editor/src/tpl/style.tsx b/packages/amis-editor/src/tpl/style.tsx index b4060e592..7a9aa3b24 100644 --- a/packages/amis-editor/src/tpl/style.tsx +++ b/packages/amis-editor/src/tpl/style.tsx @@ -191,13 +191,44 @@ setSchemaTpl('style:common', ( } ] } - ].filter(item => + ].filter(item => include.length ? ~include.indexOf(item.key) : !~exclude.indexOf(item.key) ); }); +/** + * 宽高配置控件 + * @param {object | undefined} options witdthSchema(宽度控件配置) heightSchema(高度控件配置) + */ +setSchemaTpl('style:widthHeight', (option: any = {}) => { + const {widthSchema = {}, heightSchema = {}} = option; + return { + type: 'container', + body: [ + { + type: 'input-number', + name: 'width', + label: '宽度', + unitOptions: [ + 'px', '%', 'rem', 'em', 'vw' + ], + ...widthSchema + }, + { + type: 'input-number', + name: 'height', + label: '高度', + unitOptions: [ + 'px', '%', 'rem', 'em', 'vh' + ], + ...heightSchema + }, + ] + }; +}); + /** * 样式相关的属性面板，因为预计会比较多所以拆出来 */