From 525cf6bc36c2314c58706afa113c8ae25c6daf89 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Thu, 23 Jun 2022 17:24:18 +0800 Subject: [PATCH 01/40] =?UTF-8?q?feat:=20flex=E5=B8=83=E5=B1=80=E5=AE=B9?= =?UTF-8?q?=E5=99=A8=E5=A2=9E=E5=8A=A0=E5=AE=9A=E4=BD=8D=E3=80=81inset?= =?UTF-8?q?=E3=80=81z-index=E7=AD=89=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I0b55c40344cdee00b6c076625f5db2f910f30191 --- packages/amis-editor/src/index.tsx | 1 + packages/amis-editor/src/plugin/Flex.tsx | 267 +++++++------- .../renderer/style-control/InsetBoxModel.tsx | 91 +++++ packages/amis-editor/src/tpl/common.tsx | 3 +- packages/amis-editor/src/tpl/index.tsx | 1 + packages/amis-editor/src/tpl/layout.tsx | 335 ++++++++++++++++++ 6 files changed, 556 insertions(+), 142 deletions(-) create mode 100644 packages/amis-editor/src/renderer/style-control/InsetBoxModel.tsx create mode 100644 packages/amis-editor/src/tpl/layout.tsx diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index 2e59af6d8..21c7faf00 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -149,6 +149,7 @@ import './renderer/style-control/Border'; import './renderer/style-control/BoxShadow'; import './renderer/style-control/Background'; import './renderer/style-control/Display'; +import './renderer/style-control/InsetBoxModel'; import './renderer/RangePartsControl'; import './renderer/DataBindingControl'; import './renderer/DataMappingControl'; diff --git a/packages/amis-editor/src/plugin/Flex.tsx b/packages/amis-editor/src/plugin/Flex.tsx index 08460e5ec..6035da7c4 100644 --- a/packages/amis-editor/src/plugin/Flex.tsx +++ b/packages/amis-editor/src/plugin/Flex.tsx @@ -4,25 +4,31 @@ import {registerEditorPlugin} from 'amis-editor-core'; import { BasePlugin, - PluginEvent, + PluginEvent +} from 'amis-editor-core'; +import {getSchemaTpl} from 'amis-editor-core'; +import type { + BaseEventContext, + EditorNodeType, RegionConfig, RendererJSONSchemaResolveEventContext } from 'amis-editor-core'; -import {getSchemaTpl} from 'amis-editor-core'; -import {EditorNodeType} from 'amis-editor-core'; +import {tipedLabel} from '../component/BaseControl'; +import isNumber from 'lodash/isNumber'; +import isString from 'lodash/isString'; export class FlexPlugin extends BasePlugin { // 关联渲染器名字 rendererName = 'flex'; $schema = '/schemas/FlexSchema.json'; - disabledRendererPlugin = true; + disabledRendererPlugin = false; // 组件名称 - name = 'Flex 布局'; + name = '布局容器'; // 此前叫 "Flex 布局" isBaseComponent = true; icon = 'fa fa-columns'; - pluginIcon = 'flex-plugin'; - description = 'flex 布局'; + pluginIcon = 'flex-container-plugin'; + description = '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; docLink = '/amis/zh-CN/components/flex'; tags = ['容器']; scaffold = { @@ -47,143 +53,122 @@ export class FlexPlugin extends BasePlugin { }; panelTitle = 'Flex'; - panelBody = [ - getSchemaTpl('tabs', [ - { - title: '属性', - className: 'p-none', - body: [ - getSchemaTpl('collapseGroup', [ + + + panelBodyCreator = (context: BaseEventContext) => { + const curRendererSchema = context?.schema; + const isRowContent = curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; + return [ + getSchemaTpl('tabs', [ + { + title: '属性', + className: 'p-none', + body: [ + getSchemaTpl('collapseGroup', [ + { + title: '布局', + body: [ + getSchemaTpl('layout:position', { + name: 'style.position', + // mode: 'vertical', + value: 'static', + label: tipedLabel('定位模式', '指定当前容器元素的定位类型'), + }), + getSchemaTpl('layout:inset', { + name: 'style.inset', + mode: 'vertical', + label: tipedLabel('布局位置', '指定当前容器元素的定位位置，支持配置 top、right、bottom、left。'), + visibleOn: 'data.style.position && data.style.position !== "static"', + pipeIn: (value: any) => { + let curValue = value || 'auto'; + if (isNumber(curValue)) { + curValue = curValue.toString(); + } if (!isString(curValue)) { + curValue = '0'; + } + const inset = curValue.split(' '); + return { + insetTop: inset[0] || 'auto', + insetRight: inset[1] || 'auto', + insetBottom: inset[2] || inset[0] || 'auto', + insetLeft: inset[3] || inset[1] || 'auto', + }; + }, + pipeOut: (value: any) => { + console.log('pipeOut:', value); + return `${value.insetTop ?? 'auto'} ${value.insetRight ?? 'auto'} ${value.insetBottom ?? 'auto'} ${value.insetLeft ?? 'auto'}`; + } + }), + getSchemaTpl('layout:z-index', { + name: 'style.zIndex', + mode: 'vertical', + label: tipedLabel('层级', '指定元素的堆叠顺序，层级高的元素总是会处于较低层级元素的上面。'), + visibleOn: 'data.style.position && data.style.position !== "static"' + }), + getSchemaTpl('layout:flexDirection', { + name: 'direction', + // mode: 'vertical', + value: 'row', + label: tipedLabel('排列方向', '设置成水平排列方向，则从左到右放置子项；设置成垂直排列方向，则从上到下放置子项') + }), + getSchemaTpl('layout:justifyContent', { + name: 'justify', + // mode: 'vertical', // 改成上下展示模式 + label: tipedLabel(`${isRowContent ? '水平' : '垂直'}对齐方式`, '设置子元素在主轴上的对齐方式') + }), + getSchemaTpl('layout:alignItems', { + name: 'alignItems', + // mode: 'vertical', + label: tipedLabel(`${isRowContent ? '垂直' : '水平'}对齐方式`, '设置子元素在交叉轴上的对齐方式') + }), + ] + }, + { + title: '子节点管理', + body: [ + { + name: 'items', + label: false, + type: 'combo', + scaffold: { + type: 'wrapper', + body: '子节点内容' + }, + minLength: 2, + multiple: true, + // draggable: true, + draggableTip: '', + items: [ + { + type: 'tpl', + tpl: + '子节点${index | plus}' + } + ] + } + ] + } + ]) + ] + }, + { + title: '外观', + className: 'p-none', + body: getSchemaTpl('collapseGroup', [ + ...getSchemaTpl('style:common', ['display']), { - title: '布局', - body: [ - { - name: 'justify', - type: 'select', - value: 'center', - label: '子节点水平分布方式', - menuTpl: - "
${label}${value}
", - options: [ - { - label: '起始端对齐', - value: 'flex-start' - }, - { - label: '居中对齐', - value: 'center' - }, - { - label: '末尾端对齐', - value: 'flex-end' - }, - { - label: '均匀分布（首尾留空）', - value: 'space-around' - }, - { - label: '均匀分布（首尾对齐）', - value: 'space-between' - }, - { - label: '均匀分布（元素等间距）', - value: 'space-evenly' - }, - { - label: '均匀分布（自动拉伸）', - value: 'stretch' - } - ] - }, - { - name: 'alignItems', - type: 'select', - value: 'center', - label: '子节点垂直方向位置', - menuTpl: - "
${label}${value}
", - options: [ - { - label: '起始端对齐', - value: 'flex-start' - }, - { - label: '居中对齐', - value: 'center' - }, - { - label: '末尾端对齐', - value: 'flex-end' - }, - { - label: '基线对齐', - value: 'baseline' - }, - { - label: '自动拉伸', - value: 'stretch' - } - ] - }, - { - name: 'direction', - type: 'button-group-select', - size: 'sm', - label: '布局方向', - value: 'row', - mode: 'row', - options: [ - {label: '水平', value: 'row'}, - {label: '垂直', value: 'column'} - ] - } - ] - }, - { - title: '子节点管理', - body: [ - { - name: 'items', - label: false, - type: 'combo', - scaffold: { - type: 'wrapper', - body: '子节点内容' - }, - minLength: 2, - multiple: true, - // draggable: true, - draggableTip: '', - items: [ - { - type: 'tpl', - tpl: - '子节点${index | plus}' - } - ] - } - ] + title: 'CSS 类名', + body: [getSchemaTpl('className', {label: '外层CSS类名'})] } ]) - ] - }, - { - title: '外观', - className: 'p-none', - body: getSchemaTpl('collapseGroup', [ - ...getSchemaTpl('style:common', ['display']), - { - title: 'CSS 类名', - body: [getSchemaTpl('className', {label: '外层CSS类名'})] - } - ]) - }, - { - title: '状态', - body: [getSchemaTpl('visible'), getSchemaTpl('disabled')] - } - ]) - ]; + }, + { + title: '状态', + body: [getSchemaTpl('visible'), getSchemaTpl('disabled')] + } + ]) + ]; + }; regions: Array = [ { diff --git a/packages/amis-editor/src/renderer/style-control/InsetBoxModel.tsx b/packages/amis-editor/src/renderer/style-control/InsetBoxModel.tsx new file mode 100644 index 000000000..efa82d078 --- /dev/null +++ b/packages/amis-editor/src/renderer/style-control/InsetBoxModel.tsx @@ -0,0 +1,91 @@ +/** + * @file InsetBoxModel + * @description 盒模型控件，支持编辑 top、right、bottom、left + */ + +import cx from 'classnames'; +import React from 'react'; +import {observer} from 'mobx-react'; +import camelCase from 'lodash/camelCase'; +import {FormItem} from 'amis'; +import isString from 'lodash/isString'; + +import {isNumeric} from 'amis-editor-core'; + +import type {FormControlProps} from 'amis-core'; +import type {PlainObject} from './types'; + +export type Direction = 'left' | 'right' | 'top' | 'bottom'; + +function InsetBoxModel({ + value, + onChange +}: { + value?: PlainObject; + onChange: (value: PlainObject) => void; +}) { + const directions: Direction[] = ['left', 'right', 'top', 'bottom']; + + function handleChange(styleName: string) { + return (e: React.ChangeEvent) => { + let inputValue = e.target.value; + + if (!inputValue) { + onChange({...value, [styleName]: ''}); + return; + } + + // 数字类型或带有合法单位的字符串都支持 + if ( + isNumeric(inputValue) || + isString(inputValue) + ) { + onChange({ + ...value, + [styleName]: inputValue + }); + } + }; + } + + function renderBoxItem(item: string) { + return ( + <> + {directions.map((direction: Direction) => { + const propsName = camelCase(`${item}-${direction}`); + + return ( + + ); + })} +
{item.toUpperCase()}
+ {['lt', 'lb', 'rt', 'rb'].map(position => ( +
+ ))} + + ); + } + + return ( +
+
+ {renderBoxItem('inset')} +
+ ); +} + +export default observer(InsetBoxModel); + +@FormItem({type: 'inset-box-model'}) +export class BoxModelRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-editor/src/tpl/common.tsx b/packages/amis-editor/src/tpl/common.tsx index 97fe3303f..6e3bedc82 100644 --- a/packages/amis-editor/src/tpl/common.tsx +++ b/packages/amis-editor/src/tpl/common.tsx @@ -351,7 +351,8 @@ setSchemaTpl( rendererSchema: curRendererSchema, rendererWrapper: config?.rendererWrapper, needDeleteValue: config?.needDeleteValue, - valueType: config?.valueType + valueType: config?.valueType, + visibleOn: config?.visibleOn } ] }; diff --git a/packages/amis-editor/src/tpl/index.tsx b/packages/amis-editor/src/tpl/index.tsx index 118182aad..512edc3c2 100644 --- a/packages/amis-editor/src/tpl/index.tsx +++ b/packages/amis-editor/src/tpl/index.tsx @@ -5,5 +5,6 @@ import './api'; import './options'; import './validations'; import './style'; +import './layout'; export * from './style'; diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx new file mode 100644 index 000000000..4567f669b --- /dev/null +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -0,0 +1,335 @@ +import {setSchemaTpl, getSchemaTpl, defaultValue} from 'amis-editor-core'; +import {SchemaCollection} from 'amis/lib/Schema'; +import kebabCase from 'lodash/kebabCase'; + +/** + * 布局相关配置项 + */ + +// 定位模式 +setSchemaTpl( + 'layout:position', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; // 用于控制显示的表达式 + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'select', + label: config?.label || '定位', + name: config?.name || 'position', + value: config?.value || 'static', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '默认', + value: 'static' + }, + { + label: '相对', + value: 'relative' + }, + { + label: '固定(相对窗口)', + value: 'fixed' + }, + { + label: '绝对(相对父容器)', + value: 'absolute' + }, + ] + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + +// 主轴排列方向 +setSchemaTpl( + 'layout:justifyContent', + (config?: { + mode?: string; // 自定义展示默认值，上下展示: vertical, 左右展示: horizontal + label?: string; // 表单项 label + name?: string; // 表单项 name + value?: string, + visibleOn?: string; // 用于控制显示的表达式 + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'select', + label: config?.label || '主轴上的对齐方式', + name: config?.name || 'justifyContent', + value: config?.value || 'center', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '起始端对齐', + value: 'flex-start' + }, + { + label: '居中对齐', + value: 'center' + }, + { + label: '末尾端对齐', + value: 'flex-end' + }, + { + label: '均匀分布（首尾留空）', + value: 'space-around' + }, + { + label: '均匀分布（首尾对齐）', + value: 'space-between' + }, + { + label: '均匀分布（元素等间距）', + value: 'space-evenly' + }, + { + label: '均匀分布（自动拉伸）', + value: 'stretch' + } + ] + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + +// 交叉轴排列方向 +setSchemaTpl( + 'layout:alignItems', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'select', + label: config?.label || '交叉轴上的对齐方式', + name: config?.name || 'alignItems', + value: config?.value || 'stretch', // 如果项目未设置高度或设为auto，将占满整个容器的高度。 + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '起始端对齐', + value: 'flex-start' + }, + { + label: '居中对齐', + value: 'center' + }, + { + label: '末尾端对齐', + value: 'flex-end' + }, + { + label: '基线对齐', + value: 'baseline' + }, + { + label: '自动拉伸', + value: 'stretch' + } + ] + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + +// 排列方向 +setSchemaTpl( + 'layout:flexDirection', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'select', + label: config?.label || '排列方向', + name: config?.name || 'flexDirection', + value: config?.value || 'row', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '水平', + value: 'row' + }, + { + label: '水平（起点在右端）', + value: 'row-reverse' + }, + { + label: '垂直', + value: 'column' + }, + { + label: '垂直（起点在下沿）', + value: 'column-reverse' + }, + ] + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + +// inset 配置: +setSchemaTpl( + 'layout:inset', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'inset-box-model', + label: config?.label || '布局位置', + name: config?.name || 'style.inset', + value: config?.value || 'auto', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + +// z-index 配置: +setSchemaTpl( + 'layout:z-index', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'input-number', + label: config?.label || '层级', + name: config?.name || 'style.zIndex', + value: config?.value || '0', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); \ No newline at end of file From c2b52d6dfae09ca75b41721f66683764fc82ff37 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 27 Jun 2022 20:55:10 +0800 Subject: [PATCH 02/40] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E5=AE=B9?= =?UTF-8?q?=E5=99=A8=E5=88=97=E7=BA=A7=E5=85=83=E7=B4=A0=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=9B=B8=E5=85=B3=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I93272b8b4edb420e62628a63f6f16404f9beef88 --- packages/amis-editor/src/plugin/Flex.tsx | 25 +-- packages/amis-editor/src/plugin/Wrapper.tsx | 196 ++++++++++-------- .../src/renderer/style-control/BoxModel.tsx | 2 + .../renderer/style-control/InsetBoxModel.tsx | 9 +- packages/amis-editor/src/tpl/layout.tsx | 187 +++++++++++++++-- packages/amis-editor/src/util.ts | 12 ++ 6 files changed, 307 insertions(+), 124 deletions(-) diff --git a/packages/amis-editor/src/plugin/Flex.tsx b/packages/amis-editor/src/plugin/Flex.tsx index 6035da7c4..54bbb29e7 100644 --- a/packages/amis-editor/src/plugin/Flex.tsx +++ b/packages/amis-editor/src/plugin/Flex.tsx @@ -68,17 +68,9 @@ export class FlexPlugin extends BasePlugin { { title: '布局', body: [ - getSchemaTpl('layout:position', { - name: 'style.position', - // mode: 'vertical', - value: 'static', - label: tipedLabel('定位模式', '指定当前容器元素的定位类型'), - }), + getSchemaTpl('layout:position'), getSchemaTpl('layout:inset', { - name: 'style.inset', mode: 'vertical', - label: tipedLabel('布局位置', '指定当前容器元素的定位位置，支持配置 top、right、bottom、left。'), - visibleOn: 'data.style.position && data.style.position !== "static"', pipeIn: (value: any) => { let curValue = value || 'auto'; if (isNumber(curValue)) { @@ -99,17 +91,9 @@ export class FlexPlugin extends BasePlugin { return `${value.insetTop ?? 'auto'} ${value.insetRight ?? 'auto'} ${value.insetBottom ?? 'auto'} ${value.insetLeft ?? 'auto'}`; } }), - getSchemaTpl('layout:z-index', { - name: 'style.zIndex', - mode: 'vertical', - label: tipedLabel('层级', '指定元素的堆叠顺序，层级高的元素总是会处于较低层级元素的上面。'), - visibleOn: 'data.style.position && data.style.position !== "static"' - }), + getSchemaTpl('layout:z-index'), getSchemaTpl('layout:flexDirection', { name: 'direction', - // mode: 'vertical', - value: 'row', - label: tipedLabel('排列方向', '设置成水平排列方向，则从左到右放置子项；设置成垂直排列方向，则从上到下放置子项') }), getSchemaTpl('layout:justifyContent', { name: 'justify', @@ -118,9 +102,12 @@ export class FlexPlugin extends BasePlugin { }), getSchemaTpl('layout:alignItems', { name: 'alignItems', - // mode: 'vertical', label: tipedLabel(`${isRowContent ? '垂直' : '水平'}对齐方式`, '设置子元素在交叉轴上的对齐方式') }), + getSchemaTpl('layout:isFixedHeight'), + getSchemaTpl('layout:height'), + getSchemaTpl('layout:isFixedWidth'), + getSchemaTpl('layout:width'), ] }, { diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index 5d244cb53..fc97330b9 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -1,6 +1,7 @@ import {registerEditorPlugin} from 'amis-editor-core'; -import {BasePlugin, RegionConfig, RendererInfo} from 'amis-editor-core'; +import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core'; import {defaultValue, getSchemaTpl} from 'amis-editor-core'; +import {tipedLabel} from '../component/BaseControl'; export class WrapperPlugin extends BasePlugin { // 关联渲染器名字 @@ -31,98 +32,119 @@ export class WrapperPlugin extends BasePlugin { ]; panelTitle = '包裹'; - panelBody = [ - getSchemaTpl('tabs', [ - { - title: '属性', - className: 'p-none', - body: [ - getSchemaTpl('collapseGroup', [ - { - title: '常用', - body: [ - { - label: '内间距', - type: 'button-group-select', - name: 'size', - size: 'xs', - mode: 'row', - className: 'ae-buttonGroupSelect--justify', - options: [ - { - label: '极小', - value: 'xs' + + panelBodyCreator = (context: BaseEventContext) => { + const curRendererSchema = context?.schema; + const isFlexItem = this.manager?.isFlexItem(context?.id); + + return [ + getSchemaTpl('tabs', [ + { + title: '属性', + className: 'p-none', + body: [ + getSchemaTpl('collapseGroup', [ + isFlexItem ? { + title: '布局', + body: [ + getSchemaTpl('layout:flex', { + pipeIn: (value: string) => { + return value === '1 1 auto' ? true : false; }, - { - label: '小', - value: 'sm' - }, - { - label: '默认', - value: '' - }, - { - label: '中', - value: 'md' - }, - { - label: '大', - value: 'lg' - }, - { - label: '无', - value: 'none' + pipeOut: (value: boolean) => { + return value ? '1 1 auto' : '0 0 auto'; } - ], - pipeIn: defaultValue('') - } - ] - }, - { - title: '子节点管理', - body: [ - { - name: 'body', - label: false, - type: 'combo', - scaffold: { - type: 'tpl', - tpl: '子节点', - inline: false - }, - multiple: true, - draggableTip: '', - items: [ - { + }), + getSchemaTpl('layout:flex-basis'), + getSchemaTpl('layout:flex-grow'), + ] + } : null, + { + title: '常用', + body: [ + { + label: '内间距', + type: 'button-group-select', + name: 'size', + size: 'xs', + mode: 'row', + className: 'ae-buttonGroupSelect--justify', + options: [ + { + label: '极小', + value: 'xs' + }, + { + label: '小', + value: 'sm' + }, + { + label: '默认', + value: '' + }, + { + label: '中', + value: 'md' + }, + { + label: '大', + value: 'lg' + }, + { + label: '无', + value: 'none' + } + ], + pipeIn: defaultValue('') + } + ] + }, + { + title: '子节点管理', + body: [ + { + name: 'body', + label: false, + type: 'combo', + scaffold: { type: 'tpl', - tpl: - '子节点${index | plus}' - } - ] - } + tpl: '子节点', + inline: false + }, + multiple: true, + draggableTip: '', + items: [ + { + type: 'tpl', + tpl: + '子节点${index | plus}' + } + ] + } + ] + } + ]) + ] + }, + { + title: '外观', + className: 'p-none', + body: getSchemaTpl('collapseGroup', [ + ...getSchemaTpl('style:common'), + { + title: 'CSS 类名', + body: [ + getSchemaTpl('className', { + description: '设置样式后，大小设置将无效。', + pipeIn: defaultValue('bg-white') + }) ] } ]) - ] - }, - { - title: '外观', - className: 'p-none', - body: getSchemaTpl('collapseGroup', [ - ...getSchemaTpl('style:common'), - { - title: 'CSS 类名', - body: [ - getSchemaTpl('className', { - description: '设置样式后，大小设置将无效。', - pipeIn: defaultValue('bg-white') - }) - ] - } - ]) - } - ]) - ]; + } + ]) + ]; + } } registerEditorPlugin(WrapperPlugin); diff --git a/packages/amis-editor/src/renderer/style-control/BoxModel.tsx b/packages/amis-editor/src/renderer/style-control/BoxModel.tsx index 97ae3af7b..e02e650f1 100644 --- a/packages/amis-editor/src/renderer/style-control/BoxModel.tsx +++ b/packages/amis-editor/src/renderer/style-control/BoxModel.tsx @@ -10,6 +10,7 @@ import camelCase from 'lodash/camelCase'; import {FormItem} from 'amis'; import {isNumeric} from 'amis-editor-core'; +import {isAuto} from '../../util'; import type {FormControlProps} from 'amis-core'; import type {PlainObject} from './types'; @@ -37,6 +38,7 @@ function BoxModel({ // 数字类型或带有合法单位的字符串都支持 if ( isNumeric(inputValue) || + isAuto(inputValue) || /^(-?(\d*\.)?\d+)((px)|(em)|(%)|(ex)|(ch)|(rem)|(vw)|(vh)|(vmin)|(vmax)|(cm)|(mm)|(in)|(pt)|(pc))$/.test( inputValue ) diff --git a/packages/amis-editor/src/renderer/style-control/InsetBoxModel.tsx b/packages/amis-editor/src/renderer/style-control/InsetBoxModel.tsx index efa82d078..7d0b432d8 100644 --- a/packages/amis-editor/src/renderer/style-control/InsetBoxModel.tsx +++ b/packages/amis-editor/src/renderer/style-control/InsetBoxModel.tsx @@ -8,11 +8,9 @@ import React from 'react'; import {observer} from 'mobx-react'; import camelCase from 'lodash/camelCase'; import {FormItem} from 'amis'; -import isString from 'lodash/isString'; - import {isNumeric} from 'amis-editor-core'; - import type {FormControlProps} from 'amis-core'; +import {isAuto} from '../../util'; import type {PlainObject} from './types'; export type Direction = 'left' | 'right' | 'top' | 'bottom'; @@ -38,7 +36,10 @@ function InsetBoxModel({ // 数字类型或带有合法单位的字符串都支持 if ( isNumeric(inputValue) || - isString(inputValue) + isAuto(inputValue) || + /^(-?(\d*\.)?\d+)((px)|(em)|(%)|(ex)|(ch)|(rem)|(vw)|(vh)|(vmin)|(vmax)|(cm)|(mm)|(in)|(pt)|(pc))$/.test( + inputValue + ) ) { onChange({ ...value, diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 4567f669b..31ebab68d 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -1,6 +1,5 @@ import {setSchemaTpl, getSchemaTpl, defaultValue} from 'amis-editor-core'; -import {SchemaCollection} from 'amis/lib/Schema'; -import kebabCase from 'lodash/kebabCase'; +import {tipedLabel} from '../component/BaseControl' /** * 布局相关配置项 @@ -20,8 +19,8 @@ setSchemaTpl( }) => { const configSchema = { type: 'select', - label: config?.label || '定位', - name: config?.name || 'position', + label: config?.label || tipedLabel('定位模式', '指定当前容器元素的定位类型'), + name: config?.name || 'style.position', value: config?.value || 'static', visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, @@ -78,8 +77,8 @@ setSchemaTpl( }) => { const configSchema = { type: 'select', - label: config?.label || '主轴上的对齐方式', - name: config?.name || 'justifyContent', + label: config?.label || tipedLabel(`水平对齐方式`, '设置子元素在主轴上的对齐方式'), + name: config?.name || 'style.justifyContent', value: config?.value || 'center', visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, @@ -148,8 +147,8 @@ setSchemaTpl( }) => { const configSchema = { type: 'select', - label: config?.label || '交叉轴上的对齐方式', - name: config?.name || 'alignItems', + label: config?.label || tipedLabel(`垂直对齐方式`, '设置子元素在交叉轴上的对齐方式'), + name: config?.name || 'style.alignItems', value: config?.value || 'stretch', // 如果项目未设置高度或设为auto，将占满整个容器的高度。 visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, @@ -210,8 +209,8 @@ setSchemaTpl( }) => { const configSchema = { type: 'select', - label: config?.label || '排列方向', - name: config?.name || 'flexDirection', + label: config?.label || tipedLabel('排列方向', '设置成水平排列方向，则从左到右放置子项；设置成垂直排列方向，则从上到下放置子项'), + name: config?.name || 'style.flexDirection', value: config?.value || 'row', visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, @@ -268,10 +267,10 @@ setSchemaTpl( }) => { const configSchema = { type: 'inset-box-model', - label: config?.label || '布局位置', + label: config?.label || tipedLabel('布局位置', '指定当前容器元素的定位位置，用于配置 top、right、bottom、left。'), name: config?.name || 'style.inset', value: config?.value || 'auto', - visibleOn: config?.visibleOn, + visibleOn: config?.visibleOn ?? 'data.style.position && data.style.position !== "static"', pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, } @@ -308,10 +307,10 @@ setSchemaTpl( }) => { const configSchema = { type: 'input-number', - label: config?.label || '层级', + label: config?.label || tipedLabel('层级', '指定元素的堆叠顺序，层级高的元素总是会处于较低层级元素的上面。'), name: config?.name || 'style.zIndex', value: config?.value || '0', - visibleOn: config?.visibleOn, + visibleOn: config?.visibleOn ?? 'data.style.position && data.style.position !== "static"', pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, } @@ -332,4 +331,164 @@ setSchemaTpl( // 默认左右展示 return configSchema; } +}); + +// 是否固定高度: isFixedHeight 配置: +setSchemaTpl( + 'layout:isFixedHeight', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'switch', + label: config?.label || '固定高度', + name: config?.name || 'isFixedHeight', + value: config?.value || 'false', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 是否固定高度: isFixedWidth 配置: +setSchemaTpl( + 'layout:isFixedWidth', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'switch', + label: config?.label || '固定宽度', + name: config?.name || 'isFixedWidth', + value: config?.value || 'false', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 高度设置 +setSchemaTpl( + 'layout:height', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-text', + label: config?.label || '高度', + name: config?.name || 'style.height', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? 'data.isFixedHeight', + clearable: true, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 宽度设置 +setSchemaTpl( + 'layout:width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-text', + label: config?.label || '宽度', + name: config?.name || 'style.width', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? 'data.isFixedWidth', + clearable: true, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 弹性模式 +setSchemaTpl( + 'layout:flex', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'switch', + label: config?.label || tipedLabel('弹性模式', '设置为弹性模式后，自动适配当前所在区域'), + name: config?.name || 'style.flex', + value: config?.value || '0 0 auto', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// flex-basis默认宽度设置 +setSchemaTpl( + 'layout:flex-basis', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-text', + label: config?.label || tipedLabel('默认宽度', '定义在分配多余空间之前，项目占据的主轴空间（main size）'), + name: config?.name || 'style.flexBasis', + value: config?.value || 'auto', + visibleOn: config?.visibleOn, + clearable: true, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// flex-grow 占比设置 +setSchemaTpl( + 'layout:flex-grow', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-range', + max: 12, + step: 1, + label: config?.label || tipedLabel('占比设置', '定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。'), + name: config?.name || 'style.flexGrow', + value: config?.value || 0, + visibleOn: config?.visibleOn, + clearable: true, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; }); \ No newline at end of file diff --git a/packages/amis-editor/src/util.ts b/packages/amis-editor/src/util.ts index c76119d73..a66da1517 100644 --- a/packages/amis-editor/src/util.ts +++ b/packages/amis-editor/src/util.ts @@ -15,6 +15,7 @@ import { getPropOfAcion, hasActionType } from './renderer/event-control/helper'; +import isString from 'lodash/isString'; /** * 获取事件动作面板所需属性配置 @@ -268,3 +269,14 @@ export const getEventControlConfig = ( } }; }; + +/** + * 布局配置项，数值设置时需要 + */ +export const isAuto = (value: any) => { + if (value && isString(value) + && /^((a)|(au)|(aut)|(auto))$/.test(value)) { + return true; + } + return false; +} \ No newline at end of file From be7a41410ab61540394dfe3bc57109de3261e20f Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 28 Jun 2022 15:16:57 +0800 Subject: [PATCH 03/40] =?UTF-8?q?feat(layout):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=9C=80=E5=A4=A7=E5=AE=BD=E5=BA=A6&=E9=AB=98=E5=BA=A6?= =?UTF-8?q?=EF=BC=8C=E6=BB=9A=E5=8A=A8=E6=A8=A1=E5=BC=8F=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I7c00c317fb0b7ecc1f418a3b889688ee6591108f --- packages/amis-editor/src/plugin/Flex.tsx | 25 +-- packages/amis-editor/src/plugin/Wrapper.tsx | 19 +- packages/amis-editor/src/tpl/layout.tsx | 212 +++++++++++++++++++- 3 files changed, 219 insertions(+), 37 deletions(-) diff --git a/packages/amis-editor/src/plugin/Flex.tsx b/packages/amis-editor/src/plugin/Flex.tsx index 54bbb29e7..3155bae53 100644 --- a/packages/amis-editor/src/plugin/Flex.tsx +++ b/packages/amis-editor/src/plugin/Flex.tsx @@ -14,8 +14,6 @@ import type { RendererJSONSchemaResolveEventContext } from 'amis-editor-core'; import {tipedLabel} from '../component/BaseControl'; -import isNumber from 'lodash/isNumber'; -import isString from 'lodash/isString'; export class FlexPlugin extends BasePlugin { // 关联渲染器名字 @@ -71,25 +69,6 @@ export class FlexPlugin extends BasePlugin { getSchemaTpl('layout:position'), getSchemaTpl('layout:inset', { mode: 'vertical', - pipeIn: (value: any) => { - let curValue = value || 'auto'; - if (isNumber(curValue)) { - curValue = curValue.toString(); - } if (!isString(curValue)) { - curValue = '0'; - } - const inset = curValue.split(' '); - return { - insetTop: inset[0] || 'auto', - insetRight: inset[1] || 'auto', - insetBottom: inset[2] || inset[0] || 'auto', - insetLeft: inset[3] || inset[1] || 'auto', - }; - }, - pipeOut: (value: any) => { - console.log('pipeOut:', value); - return `${value.insetTop ?? 'auto'} ${value.insetRight ?? 'auto'} ${value.insetBottom ?? 'auto'} ${value.insetLeft ?? 'auto'}`; - } }), getSchemaTpl('layout:z-index'), getSchemaTpl('layout:flexDirection', { @@ -108,6 +87,10 @@ export class FlexPlugin extends BasePlugin { getSchemaTpl('layout:height'), getSchemaTpl('layout:isFixedWidth'), getSchemaTpl('layout:width'), + getSchemaTpl('layout:max-height'), + getSchemaTpl('layout:max-width'), + getSchemaTpl('layout:overflow-x'), + getSchemaTpl('layout:overflow-y'), ] }, { diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index fc97330b9..0dbb5d71e 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -47,16 +47,19 @@ export class WrapperPlugin extends BasePlugin { isFlexItem ? { title: '布局', body: [ - getSchemaTpl('layout:flex', { - pipeIn: (value: string) => { - return value === '1 1 auto' ? true : false; - }, - pipeOut: (value: boolean) => { - return value ? '1 1 auto' : '0 0 auto'; - } - }), + getSchemaTpl('layout:flex'), getSchemaTpl('layout:flex-basis'), getSchemaTpl('layout:flex-grow'), + getSchemaTpl('layout:display'), + getSchemaTpl('layout:flexDirection', { + visibleOn: 'data.style.display === "flex"', + }), + getSchemaTpl('layout:justifyContent', { + visibleOn: 'data.style.display === "flex"', + }), + getSchemaTpl('layout:alignItems', { + visibleOn: 'data.style.display === "flex"', + }), ] } : null, { diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 31ebab68d..e6eebd079 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -1,5 +1,7 @@ import {setSchemaTpl, getSchemaTpl, defaultValue} from 'amis-editor-core'; import {tipedLabel} from '../component/BaseControl' +import isNumber from 'lodash/isNumber'; +import isString from 'lodash/isString'; /** * 布局相关配置项 @@ -262,8 +264,6 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; }) => { const configSchema = { type: 'inset-box-model', @@ -271,8 +271,25 @@ setSchemaTpl( name: config?.name || 'style.inset', value: config?.value || 'auto', visibleOn: config?.visibleOn ?? 'data.style.position && data.style.position !== "static"', - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, + pipeIn: (value: any) => { + let curValue = value || 'auto'; + if (isNumber(curValue)) { + curValue = curValue.toString(); + } if (!isString(curValue)) { + curValue = '0'; + } + const inset = curValue.split(' '); + return { + insetTop: inset[0] || 'auto', + insetRight: inset[1] || 'auto', + insetBottom: inset[2] || inset[0] || 'auto', + insetLeft: inset[3] || inset[1] || 'auto', + }; + }, + pipeOut: (value: any) => { + console.log('pipeOut:', value); + return `${value.insetTop ?? 'auto'} ${value.insetRight ?? 'auto'} ${value.insetBottom ?? 'auto'} ${value.insetLeft ?? 'auto'}`; + } } if (config?.mode === 'vertical') { @@ -431,8 +448,6 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; }) => { return { type: 'switch', @@ -440,8 +455,12 @@ setSchemaTpl( name: config?.name || 'style.flex', value: config?.value || '0 0 auto', visibleOn: config?.visibleOn, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, + pipeIn: (value: string) => { + return value === '1 1 auto' ? true : false; + }, + pipeOut: (value: boolean) => { + return value ? '1 1 auto' : '0 0 auto'; + } }; }); @@ -491,4 +510,181 @@ setSchemaTpl( pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; +}); + +// 布局模式 +setSchemaTpl( + 'layout:display', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'select', + label: config?.label || tipedLabel('布局模式', '默认为块级，可设置为弹性布局模式（flex布局容器）'), + name: config?.name || 'style.display', + value: config?.value || 'block', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '默认', + value: 'block' + }, + { + label: '弹性布局', + value: 'flex' + }, + ] + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + + +// 最大宽度设置 +setSchemaTpl( + 'layout:max-width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-text', + label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最多的展示宽度'), + name: config?.name || 'style.maxWidth', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? '!data.isFixedWidth', + clearable: true, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 最大高度设置 +setSchemaTpl( + 'layout:max-height', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-text', + label: config?.label || tipedLabel('最大高度', '最大高度即当前元素最多的展示高度'), + name: config?.name || 'style.maxHeight', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? '!data.isFixedHeight', + clearable: true, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// x轴（水平轴）滚动模式 +setSchemaTpl( + 'layout:overflow-x', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'select', + label: config?.label || tipedLabel(' x轴滚动模式', '用于设置水平方向的滚动模式'), + name: config?.name || 'style.overflow-x', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? 'data.isFixedWidth || data.style.maxWidth', + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '超出显示', + value: 'visible' + }, + { + label: '超出隐藏', + value: 'hidden' + }, + { + label: '滚动显示', + value: 'scroll' + }, + { + label: '自动适配', + value: 'auto' + }, + ] + }; +}); + +// y轴（交叉轴）滚动模式 +setSchemaTpl( + 'layout:overflow-y', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'select', + label: config?.label || tipedLabel(' y轴滚动模式', '用于设置垂直方向的滚动模式'), + name: config?.name || 'style.overflow-y', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? 'data.isFixedHeight || data.style.maxHeight', + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '超出显示', + value: 'visible' + }, + { + label: '超出隐藏', + value: 'hidden' + }, + { + label: '滚动显示', + value: 'scroll' + }, + { + label: '自动适配', + value: 'auto' + }, + ] + }; }); \ No newline at end of file From 0ccd9c9a70c7763c57f1f552505646625e1e7b31 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 28 Jun 2022 16:51:20 +0800 Subject: [PATCH 04/40] =?UTF-8?q?feat(layout):=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E9=85=8D=E7=BD=AE=E9=A1=B9=E4=B9=8B=E9=97=B4?= =?UTF-8?q?=E7=9A=84=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I0079a9b4123ec1846e9ff87570cc0af218a0db8f --- packages/amis-editor/src/tpl/layout.tsx | 45 +++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 3 deletions(-) diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index e6eebd079..63c512681 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -27,6 +27,12 @@ setSchemaTpl( visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, + onChange: (value: string, oldValue: string, model: any, form: any) => { + if (value === 'static') { + form.setValueByName('style.inset', undefined); + form.setValueByName('style.zIndex', undefined); + } + }, options: [ { label: '默认', @@ -330,6 +336,7 @@ setSchemaTpl( visibleOn: config?.visibleOn ?? 'data.style.position && data.style.position !== "static"', pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, + } if (config?.mode === 'vertical') { @@ -369,6 +376,15 @@ setSchemaTpl( visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, + onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { + if (value) { + // 固定高度时，剔除最大高度 + form.setValueByName('style.maxHeight', undefined); + } else { + // 非固定高度时，剔除高度数值 + form.setValueByName('style.height', undefined); + } + }, }; }); @@ -391,6 +407,15 @@ setSchemaTpl( visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, + onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { + if (value) { + // 固定宽度时，剔除最大宽度 + form.setValueByName('style.maxWidth', undefined); + } else { + // 非固定宽度时，剔除宽度数值 + form.setValueByName('style.width', undefined); + } + }, }; }); @@ -460,7 +485,14 @@ setSchemaTpl( }, pipeOut: (value: boolean) => { return value ? '1 1 auto' : '0 0 auto'; - } + }, + onChange: (value: any, oldValue: boolean, model: any, form: any) => { + if (!value || value === '0 0 auto') { + // 非弹性模式下，剔除默认宽度和占比设置 + form.setValueByName('style.flexBasis', undefined); + form.setValueByName('style.flexGrow', undefined); + } + }, }; }); @@ -532,6 +564,13 @@ setSchemaTpl( visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, + onChange: (value: string, oldValue: string, model: any, form: any) => { + if (value !== 'flex' && value !== 'inline-flex') { + form.setValueByName('style.flexDirection', undefined); + form.setValueByName('style.justifyContent', undefined); + form.setValueByName('style.alignItems', undefined); + } + }, options: [ { label: '默认', @@ -623,7 +662,7 @@ setSchemaTpl( return { type: 'select', label: config?.label || tipedLabel(' x轴滚动模式', '用于设置水平方向的滚动模式'), - name: config?.name || 'style.overflow-x', + name: config?.name || 'style.overflowX', value: config?.value || 'auto', visibleOn: config?.visibleOn ?? 'data.isFixedWidth || data.style.maxWidth', pipeIn: config?.pipeIn, @@ -663,7 +702,7 @@ setSchemaTpl( return { type: 'select', label: config?.label || tipedLabel(' y轴滚动模式', '用于设置垂直方向的滚动模式'), - name: config?.name || 'style.overflow-y', + name: config?.name || 'style.overflowY', value: config?.value || 'auto', visibleOn: config?.visibleOn ?? 'data.isFixedHeight || data.style.maxHeight', pipeIn: config?.pipeIn, From b48ecc7840717f687256d87ebe6a844bc47c7e91 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 28 Jun 2022 19:28:08 +0800 Subject: [PATCH 05/40] =?UTF-8?q?feat(layout):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=B1=85=E4=B8=AD=E6=98=BE=E7=A4=BA=E9=85=8D=E7=BD=AE=E9=A1=B9?= =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=BA=9B=E5=B8=B8?= =?UTF-8?q?=E8=A7=81=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I5fb75517b75028a0fcef44325c969ab5b3250040 --- packages/amis-editor/src/index.tsx | 8 + packages/amis-editor/src/plugin/Flex.tsx | 146 +--------------- .../src/plugin/Layout/FlexPluginBase.tsx | 163 ++++++++++++++++++ .../src/plugin/Layout/Layout1_1.tsx | 58 +++++++ .../src/plugin/Layout/Layout1_1_1.tsx | 75 ++++++++ .../src/plugin/Layout/Layout1_1_v2.tsx | 67 +++++++ .../src/plugin/Layout/Layout1_2.tsx | 58 +++++++ .../src/plugin/Layout/Layout1_2_3.tsx | 75 ++++++++ .../src/plugin/Layout/Layout1_3.tsx | 58 +++++++ packages/amis-editor/src/plugin/Wrapper.tsx | 8 +- packages/amis-editor/src/tpl/layout.tsx | 48 +++++- 11 files changed, 614 insertions(+), 150 deletions(-) create mode 100644 packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_1.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_3.tsx diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index 21c7faf00..548ba3ed5 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -132,6 +132,14 @@ import './plugin/TableView'; import './plugin/CodeView'; import './plugin/WebComponent'; +// 常见布局 +import './plugin/Layout/Layout1_1'; +import './plugin/Layout/Layout1_2'; +import './plugin/Layout/Layout1_3'; +import './plugin/Layout/Layout1_1_v2'; +import './plugin/Layout/Layout1_1_1'; +import './plugin/Layout/Layout1_2_3'; + import {GridPlugin} from './plugin/Grid'; import './renderer/OptionControl'; diff --git a/packages/amis-editor/src/plugin/Flex.tsx b/packages/amis-editor/src/plugin/Flex.tsx index 3155bae53..a1b15471c 100644 --- a/packages/amis-editor/src/plugin/Flex.tsx +++ b/packages/amis-editor/src/plugin/Flex.tsx @@ -14,152 +14,12 @@ import type { RendererJSONSchemaResolveEventContext } from 'amis-editor-core'; import {tipedLabel} from '../component/BaseControl'; +import {FlexPluginBase} from './Layout/FlexPluginBase'; -export class FlexPlugin extends BasePlugin { - // 关联渲染器名字 - rendererName = 'flex'; - $schema = '/schemas/FlexSchema.json'; - disabledRendererPlugin = false; - - // 组件名称 - name = '布局容器'; // 此前叫 "Flex 布局" - isBaseComponent = true; - icon = 'fa fa-columns'; +export class FlexPlugin extends FlexPluginBase { + name = '布局容器'; pluginIcon = 'flex-container-plugin'; description = '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; - docLink = '/amis/zh-CN/components/flex'; - tags = ['容器']; - scaffold = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: '第一列' - }, - { - type: 'wrapper', - body: '第二列' - }, - { - type: 'wrapper', - body: '第三列' - } - ] - }; - previewSchema = { - ...this.scaffold - }; - - panelTitle = 'Flex'; - - - panelBodyCreator = (context: BaseEventContext) => { - const curRendererSchema = context?.schema; - const isRowContent = curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; - return [ - getSchemaTpl('tabs', [ - { - title: '属性', - className: 'p-none', - body: [ - getSchemaTpl('collapseGroup', [ - { - title: '布局', - body: [ - getSchemaTpl('layout:position'), - getSchemaTpl('layout:inset', { - mode: 'vertical', - }), - getSchemaTpl('layout:z-index'), - getSchemaTpl('layout:flexDirection', { - name: 'direction', - }), - getSchemaTpl('layout:justifyContent', { - name: 'justify', - // mode: 'vertical', // 改成上下展示模式 - label: tipedLabel(`${isRowContent ? '水平' : '垂直'}对齐方式`, '设置子元素在主轴上的对齐方式') - }), - getSchemaTpl('layout:alignItems', { - name: 'alignItems', - label: tipedLabel(`${isRowContent ? '垂直' : '水平'}对齐方式`, '设置子元素在交叉轴上的对齐方式') - }), - getSchemaTpl('layout:isFixedHeight'), - getSchemaTpl('layout:height'), - getSchemaTpl('layout:isFixedWidth'), - getSchemaTpl('layout:width'), - getSchemaTpl('layout:max-height'), - getSchemaTpl('layout:max-width'), - getSchemaTpl('layout:overflow-x'), - getSchemaTpl('layout:overflow-y'), - ] - }, - { - title: '子节点管理', - body: [ - { - name: 'items', - label: false, - type: 'combo', - scaffold: { - type: 'wrapper', - body: '子节点内容' - }, - minLength: 2, - multiple: true, - // draggable: true, - draggableTip: '', - items: [ - { - type: 'tpl', - tpl: - '子节点${index | plus}' - } - ] - } - ] - } - ]) - ] - }, - { - title: '外观', - className: 'p-none', - body: getSchemaTpl('collapseGroup', [ - ...getSchemaTpl('style:common', ['display']), - { - title: 'CSS 类名', - body: [getSchemaTpl('className', {label: '外层CSS类名'})] - } - ]) - }, - { - title: '状态', - body: [getSchemaTpl('visible'), getSchemaTpl('disabled')] - } - ]) - ]; - }; - - regions: Array = [ - { - key: 'items', - label: '子节点集合', - // 复写渲染器里面的 render 方法 - renderMethod: 'render', - dndMode: 'position-h' - } - ]; - - afterResolveJsonSchema( - event: PluginEvent - ) { - const context = event.context; - const parent = context.node.parent?.host as EditorNodeType; - - if (parent?.info?.plugin === this) { - event.setData('/schemas/FlexColumn.json'); - } - } } registerEditorPlugin(FlexPlugin); diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx new file mode 100644 index 000000000..7a68c9512 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -0,0 +1,163 @@ +/** + * @file Flex 常见布局 1:3 + */ +import { + BasePlugin, + PluginEvent +} from 'amis-editor-core'; +import {getSchemaTpl} from 'amis-editor-core'; +import type { + BaseEventContext, + EditorNodeType, + RegionConfig, + RendererJSONSchemaResolveEventContext +} from 'amis-editor-core'; +import {tipedLabel} from '../../component/BaseControl'; + +export class FlexPluginBase extends BasePlugin { + rendererName = 'flex'; + $schema = '/schemas/FlexSchema.json'; + disabledRendererPlugin = false; + + // 组件名称 + name = '布局容器'; + isBaseComponent = true; + icon = 'fa fa-columns'; + pluginIcon = 'flex-container-plugin'; + description = '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; + docLink = '/amis/zh-CN/components/flex'; + tags = ['容器']; + scaffold = { + type: 'flex', + items: [ + { + type: 'wrapper', + body: '第一列' + }, + { + type: 'wrapper', + body: '第二列' + }, + { + type: 'wrapper', + body: '第三列' + } + ] + }; + previewSchema = { + ...this.scaffold + }; + + panelTitle = 'Flex'; + + panelJustify = true; // 右侧配置项默认左右展示 + + panelBodyCreator = (context: BaseEventContext) => { + const curRendererSchema = context?.schema; + const isRowContent = curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; + return [ + getSchemaTpl('tabs', [ + { + title: '属性', + className: 'p-none', + body: [ + getSchemaTpl('collapseGroup', [ + { + title: '布局', + body: [ + getSchemaTpl('layout:position'), + getSchemaTpl('layout:inset', { + mode: 'vertical', + }), + getSchemaTpl('layout:z-index'), + getSchemaTpl('layout:flexDirection', { + name: 'direction', + }), + getSchemaTpl('layout:justifyContent', { + name: 'justify', + // mode: 'vertical', // 改成上下展示模式 + label: tipedLabel(`${isRowContent ? '水平' : '垂直'}对齐方式`, '设置子元素在主轴上的对齐方式') + }), + getSchemaTpl('layout:alignItems', { + name: 'alignItems', + label: tipedLabel(`${isRowContent ? '垂直' : '水平'}对齐方式`, '设置子元素在交叉轴上的对齐方式') + }), + getSchemaTpl('layout:isFixedHeight'), + getSchemaTpl('layout:height'), + getSchemaTpl('layout:isFixedWidth'), + getSchemaTpl('layout:width'), + getSchemaTpl('layout:max-height'), + getSchemaTpl('layout:max-width'), + getSchemaTpl('layout:overflow-x'), + getSchemaTpl('layout:overflow-y'), + getSchemaTpl('layout:margin-center'), + ] + }, + { + title: '子节点管理', + body: [ + { + name: 'items', + label: false, + type: 'combo', + scaffold: { + type: 'wrapper', + body: '子节点内容' + }, + minLength: 2, + multiple: true, + // draggable: true, + draggableTip: '', + items: [ + { + type: 'tpl', + tpl: + '子节点${index | plus}' + } + ] + } + ] + } + ]) + ] + }, + { + title: '外观', + className: 'p-none', + body: getSchemaTpl('collapseGroup', [ + ...getSchemaTpl('style:common', ['display']), + { + title: 'CSS 类名', + body: [getSchemaTpl('className', {label: '外层CSS类名'})] + } + ]) + }, + { + title: '状态', + body: [getSchemaTpl('visible'), getSchemaTpl('disabled')] + } + ]) + ]; + }; + + regions: Array = [ + { + key: 'items', + label: '子节点集合', + // 复写渲染器里面的 render 方法 + renderMethod: 'render', + dndMode: 'position-h' + } + ]; + + afterResolveJsonSchema( + event: PluginEvent + ) { + const context = event.context; + const parent = context.node.parent?.host as EditorNodeType; + + if (parent?.info?.plugin === this) { + event.setData('/schemas/FlexColumn.json'); + } + } +} diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx new file mode 100644 index 000000000..fcb192b2f --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx @@ -0,0 +1,58 @@ +/** + * @file Flex 常见布局 1:1 左右均分 + */ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_1 extends FlexPluginBase { + name = '左右均分'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：左右均分（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 200; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(181, 242, 167, 1)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + ], + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_1); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx new file mode 100644 index 000000000..e733173b6 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx @@ -0,0 +1,75 @@ +/** + * @file Flex 常见布局 1:1:1 + */ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_1_1 extends FlexPluginBase { + name = '三栏均分'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：三栏均分布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 300; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(181, 242, 167, 1)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第三列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + display: "block", + flexBasis: "auto", + flexGrow: 1, + backgroundColor: "rgba(242, 54, 54, 0.51)" + } + } + ], + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_1_1); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx new file mode 100644 index 000000000..c510736e4 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx @@ -0,0 +1,67 @@ +/** + * @file Flex 常见布局 1:1 左右均分 + */ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_1_v2 extends FlexPluginBase { + name = '上下均分'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：上下均分（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 203; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + backgroundColor: "rgba(181, 242, 167, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + backgroundColor: "rgba(245, 166, 35, 0.48)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + ], + direction: "column", + justify: "center", + alignItems: "stretch", + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_1_v2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx new file mode 100644 index 000000000..30951bc35 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx @@ -0,0 +1,58 @@ +/** + * @file Flex 常见布局 1:2 + */ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_2 extends FlexPluginBase { + name = '1:2 布局'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：1:2 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 201; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(181, 242, 167, 1)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 2, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + ], + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx new file mode 100644 index 000000000..22e0099cb --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx @@ -0,0 +1,75 @@ +/** + * @file Flex 常见布局 1:2:3 + */ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_2_3 extends FlexPluginBase { + name = '1:2:3 布局'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：1:2:3 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 301; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(181, 242, 167, 1)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 2, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第三列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + display: "block", + flexBasis: "auto", + flexGrow: 3, + backgroundColor: "rgba(242, 54, 54, 0.51)" + } + } + ], + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_2_3); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx new file mode 100644 index 000000000..60ca80c09 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx @@ -0,0 +1,58 @@ +/** + * @file Flex 常见布局 1:3 + */ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_3 extends FlexPluginBase { + name = '1:3 布局'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：1:3 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 202; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(181, 242, 167, 1)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 3, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + ], + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_3); diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index 0dbb5d71e..a2e015b54 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -33,6 +33,8 @@ export class WrapperPlugin extends BasePlugin { panelTitle = '包裹'; + panelJustify = true; + panelBodyCreator = (context: BaseEventContext) => { const curRendererSchema = context?.schema; const isFlexItem = this.manager?.isFlexItem(context?.id); @@ -52,13 +54,13 @@ export class WrapperPlugin extends BasePlugin { getSchemaTpl('layout:flex-grow'), getSchemaTpl('layout:display'), getSchemaTpl('layout:flexDirection', { - visibleOn: 'data.style.display === "flex"', + visibleOn: 'data.style && data.style.display === "flex"', }), getSchemaTpl('layout:justifyContent', { - visibleOn: 'data.style.display === "flex"', + visibleOn: 'data.style && data.style.display === "flex"', }), getSchemaTpl('layout:alignItems', { - visibleOn: 'data.style.display === "flex"', + visibleOn: 'data.style && data.style.display === "flex"', }), ] } : null, diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 63c512681..83793c141 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -276,7 +276,7 @@ setSchemaTpl( label: config?.label || tipedLabel('布局位置', '指定当前容器元素的定位位置，用于配置 top、right、bottom、left。'), name: config?.name || 'style.inset', value: config?.value || 'auto', - visibleOn: config?.visibleOn ?? 'data.style.position && data.style.position !== "static"', + visibleOn: config?.visibleOn ?? 'data.style && data.style.position && data.style.position !== "static"', pipeIn: (value: any) => { let curValue = value || 'auto'; if (isNumber(curValue)) { @@ -333,7 +333,7 @@ setSchemaTpl( label: config?.label || tipedLabel('层级', '指定元素的堆叠顺序，层级高的元素总是会处于较低层级元素的上面。'), name: config?.name || 'style.zIndex', value: config?.value || '0', - visibleOn: config?.visibleOn ?? 'data.style.position && data.style.position !== "static"', + visibleOn: config?.visibleOn ?? 'data.style && data.style.position && data.style.position !== "static"', pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, @@ -664,7 +664,7 @@ setSchemaTpl( label: config?.label || tipedLabel(' x轴滚动模式', '用于设置水平方向的滚动模式'), name: config?.name || 'style.overflowX', value: config?.value || 'auto', - visibleOn: config?.visibleOn ?? 'data.isFixedWidth || data.style.maxWidth', + visibleOn: config?.visibleOn ?? 'data.isFixedWidth || data.style && data.style.maxWidth', pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, options: [ @@ -704,7 +704,7 @@ setSchemaTpl( label: config?.label || tipedLabel(' y轴滚动模式', '用于设置垂直方向的滚动模式'), name: config?.name || 'style.overflowY', value: config?.value || 'auto', - visibleOn: config?.visibleOn ?? 'data.isFixedHeight || data.style.maxHeight', + visibleOn: config?.visibleOn ?? 'data.isFixedHeight || data.style && data.style.maxHeight', pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, options: [ @@ -726,4 +726,44 @@ setSchemaTpl( }, ] }; +}); + +// 居中显示 +setSchemaTpl( + 'layout:margin-center', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'switch', + label: config?.label || tipedLabel('居中显示', '通过将设置 margin: 0 auto 来达到居中显示'), + name: config?.name || 'style.margin', + value: config?.value || '0', + visibleOn: config?.visibleOn ?? 'data.isFixedWidth || data.style && data.style.maxWidth', + pipeIn: (value: any) => { + let curValue = value || '0'; + if (isNumber(curValue)) { + curValue = curValue.toString(); + } if (!isString(curValue)) { + curValue = '0'; + } + const margin = value.split(' '); + const curMargin = { + top: margin[0] || '0', + right: margin[1] || '0', + bottom: margin[2] || margin[0] || '0', + left: margin[3] || margin[1] || '0', + } + // 当左右margin数值相同时，则可认为是居中模式 + return curMargin.left !== '0' && curMargin.left === curMargin.right ? true : false; + }, + pipeOut: (value: boolean) => { + return value ? '0 auto' : '0'; + } + }; }); \ No newline at end of file From 9ba898f7d1daa77e492672c0eccdd4a377ccf41a Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 28 Jun 2022 20:32:25 +0800 Subject: [PATCH 06/40] =?UTF-8?q?feat(layout):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E4=B8=80=E6=8B=96=E4=BA=8C=E3=80=81=E4=BA=8C=E6=8B=96=E4=B8=80?= =?UTF-8?q?=E5=B8=B8=E8=A7=81=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Iee8edc04dd4cbf13ec1a5bf245b653b45fd45c79 --- packages/amis-editor/src/index.tsx | 4 + .../src/plugin/Layout/Layout1_1_1.tsx | 2 +- .../src/plugin/Layout/Layout1_1_1_v2.tsx | 87 ++++++++++++++ .../src/plugin/Layout/Layout1_1_v2.tsx | 6 +- .../src/plugin/Layout/Layout1_2_3.tsx | 4 +- .../src/plugin/Layout/Layout1_2_v2.tsx | 104 +++++++++++++++++ .../src/plugin/Layout/Layout2_1_v2.tsx | 108 ++++++++++++++++++ 7 files changed, 309 insertions(+), 6 deletions(-) create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index 548ba3ed5..9d44aee1e 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -140,6 +140,10 @@ import './plugin/Layout/Layout1_1_v2'; import './plugin/Layout/Layout1_1_1'; import './plugin/Layout/Layout1_2_3'; +import './plugin/Layout/Layout1_1_1_v2'; +import './plugin/Layout/Layout1_2_v2'; +import './plugin/Layout/Layout2_1_v2'; + import {GridPlugin} from './plugin/Grid'; import './renderer/OptionControl'; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx index e733173b6..dbf3433b0 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx @@ -1,5 +1,5 @@ /** - * @file Flex 常见布局 1:1:1 + * @file Flex 常见布局 1:1:1 三栏均分 */ import {registerEditorPlugin} from 'amis-editor-core'; import {FlexPluginBase} from './FlexPluginBase'; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx new file mode 100644 index 000000000..774e5457f --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx @@ -0,0 +1,87 @@ +/** + * @file Flex 常见布局 上中下布局 + */ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_1_1_v2 extends FlexPluginBase { + name = '上中下布局'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：上中下布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 303; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + backgroundColor: "rgba(181, 242, 167, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + backgroundColor: "rgba(245, 166, 35, 0.48)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第三列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + backgroundColor: "rgba(74, 144, 226, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + ], + direction: "column", + justify: "center", + alignItems: "stretch", + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_1_1_v2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx index c510736e4..c48ac3546 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx @@ -1,14 +1,14 @@ /** - * @file Flex 常见布局 1:1 左右均分 + * @file Flex 常见布局 上下布局 */ import {registerEditorPlugin} from 'amis-editor-core'; import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_1_v2 extends FlexPluginBase { - name = '上下均分'; + name = '上下布局'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：上下均分（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：上下布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 203; scaffold:any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx index 22e0099cb..30b96e53b 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx @@ -5,10 +5,10 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_2_3 extends FlexPluginBase { - name = '1:2:3 布局'; + name = '1:2:3 三栏'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：1:2:3 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：1:2:3 三栏（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 301; scaffold:any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx new file mode 100644 index 000000000..7a78cb061 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx @@ -0,0 +1,104 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_2_v2 extends FlexPluginBase { + name = '一拖二布局'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：一拖二布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 303; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一行", + inline: false, + } + ], + style: { + flex: "0 0 auto", + flexBasis: "100px", + backgroundColor: "rgba(181, 242, 167, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + { + type: "wrapper", + body: [ + { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(71, 92, 233, 0.68)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + ], + style: { + height: "100%", + }, + alignItems: "stretch" + } + ], + style: { + flex: "1 1 auto", + padding: 0, + }, + isFixedHeight: true, + }, + ], + style: { + overflowX: "auto", + margin: "0", + maxWidth: "auto", + height: "350px", + overflowY: "auto" + }, + direction: "column", + justify: "center", + alignItems: "stretch", + isFixedHeight: true + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_2_v2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx new file mode 100644 index 000000000..1dd81f43f --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx @@ -0,0 +1,108 @@ +/** + * @file Flex 常见布局 二拖一布局 + */ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout2_1_v2 extends FlexPluginBase { + name = '二拖一布局'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：一拖二布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 303; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(71, 92, 233, 0.68)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + ], + style: { + height: "100%", + }, + alignItems: "stretch" + } + ], + style: { + flex: "0 0 auto", + flexBasis: "100px", + padding: 0, + }, + isFixedHeight: true, + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一行", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "200px", + backgroundColor: "rgba(181, 242, 167, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + ], + style: { + overflowX: "auto", + margin: "0", + maxWidth: "auto", + height: "350px", + overflowY: "auto" + }, + direction: "column", + justify: "center", + alignItems: "stretch", + isFixedHeight: true + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout2_1_v2); From 87ec7d4054ec9da258edf7c7bae578b6dd6680ea Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 28 Jun 2022 20:51:23 +0800 Subject: [PATCH 07/40] =?UTF-8?q?feat(layout):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=B7=A6=E4=B8=80=E5=8F=B3=E4=BA=8C=E3=80=81=E5=B7=A6=E4=BA=8C?= =?UTF-8?q?=E5=8F=B3=E4=B8=80=E5=B8=B8=E8=A7=81=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I42aade0ff4e57f574ceec2a3bcc06aa2b17195af --- packages/amis-editor/src/index.tsx | 4 +- .../src/plugin/Layout/Layout1_1_1_v2.tsx | 4 +- .../src/plugin/Layout/Layout1_2_v2.tsx | 4 +- .../src/plugin/Layout/Layout1_2_v3.tsx | 112 ++++++++++++++++++ .../src/plugin/Layout/Layout2_1_v2.tsx | 6 +- .../src/plugin/Layout/Layout2_1_v3.tsx | 112 ++++++++++++++++++ 6 files changed, 234 insertions(+), 8 deletions(-) create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index 9d44aee1e..a118bfd29 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -139,11 +139,13 @@ import './plugin/Layout/Layout1_3'; import './plugin/Layout/Layout1_1_v2'; import './plugin/Layout/Layout1_1_1'; import './plugin/Layout/Layout1_2_3'; - import './plugin/Layout/Layout1_1_1_v2'; import './plugin/Layout/Layout1_2_v2'; import './plugin/Layout/Layout2_1_v2'; +import './plugin/Layout/Layout1_2_v3'; +import './plugin/Layout/Layout2_1_v3'; + import {GridPlugin} from './plugin/Grid'; import './renderer/OptionControl'; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx index 774e5457f..dc69d0a66 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx @@ -5,10 +5,10 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_1_1_v2 extends FlexPluginBase { - name = '上中下布局'; + name = '上中下'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：上中下布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：上中下（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 303; scaffold:any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx index 7a78cb061..a7aff4293 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx @@ -2,10 +2,10 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_2_v2 extends FlexPluginBase { - name = '一拖二布局'; + name = '一拖二'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：一拖二布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：一拖二（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 303; scaffold:any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx new file mode 100644 index 000000000..b7fb6eed3 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx @@ -0,0 +1,112 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_2_v3 extends FlexPluginBase { + name = '左一右二'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：左一右二（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 304; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一行", + inline: false, + } + ], + style: { + flex: "0 0 auto", + flexBasis: "250px", + backgroundColor: "rgba(181, 242, 167, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + { + type: "wrapper", + body: [ + { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(71, 92, 233, 0.68)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + ], + style: { + "height": "100%", + "position": "static", + "maxHeight": "auto", + "maxWidth": "auto", + "width": "auto", + "overflowX": "auto", + "overflowY": "auto", + "margin": "0" + }, + alignItems: "stretch", + direction: "column", + justify: "center" + } + ], + style: { + flex: "1 1 auto", + padding: 0, + } + }, + ], + style: { + overflowX: "auto", + margin: "0", + maxWidth: "auto", + height: "350px", + overflowY: "auto" + }, + direction: "row", + justify: "center", + alignItems: "stretch", + isFixedHeight: true + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_2_v3); diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx index 1dd81f43f..5e921ed22 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx @@ -5,12 +5,12 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {FlexPluginBase} from './FlexPluginBase'; export class Layout2_1_v2 extends FlexPluginBase { - name = '二拖一布局'; + name = '二拖一'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：一拖二布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：一拖二（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; - order = 303; + order = 305; scaffold:any = { type: "flex", items: [ diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx new file mode 100644 index 000000000..41952bd6b --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx @@ -0,0 +1,112 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout2_1_v3 extends FlexPluginBase { + name = '左二右一'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：左二右一（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 306; + scaffold:any = { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(71, 92, 233, 0.68)" + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二列", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + } + }, + ], + style: { + "height": "100%", + "position": "static", + "maxHeight": "auto", + "maxWidth": "auto", + "width": "auto", + "overflowX": "auto", + "overflowY": "auto", + "margin": "0" + }, + alignItems: "stretch", + direction: "column", + justify: "center" + } + ], + style: { + flex: "1 1 auto", + padding: 0, + } + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一行", + inline: false, + } + ], + style: { + flex: "0 0 auto", + flexBasis: "250px", + backgroundColor: "rgba(181, 242, 167, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + } + }, + ], + style: { + overflowX: "auto", + margin: "0", + maxWidth: "auto", + height: "350px", + overflowY: "auto" + }, + direction: "row", + justify: "center", + alignItems: "stretch", + isFixedHeight: true + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout2_1_v3); From fb71becc794af27209e07053a5c36ed66cd31a8f Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 28 Jun 2022 21:07:21 +0800 Subject: [PATCH 08/40] =?UTF-8?q?feat(layout):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E7=BB=8F=E5=85=B8=E5=B8=83=E5=B1=801?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Ib57677127790ce226fbfeecdc2512351d568b491 --- packages/amis-editor/src/index.tsx | 2 +- .../src/plugin/Layout/FlexPluginBase.tsx | 31 ++-- .../src/plugin/Layout/Layout1_1.tsx | 43 ++--- .../src/plugin/Layout/Layout1_1_1.tsx | 57 +++---- .../src/plugin/Layout/Layout1_1_1_v2.tsx | 78 ++++----- .../src/plugin/Layout/Layout1_1_v2.tsx | 59 +++---- .../src/plugin/Layout/Layout1_2.tsx | 43 ++--- .../src/plugin/Layout/Layout1_2_3.tsx | 57 +++---- .../src/plugin/Layout/Layout1_2_v2.tsx | 92 +++++----- .../src/plugin/Layout/Layout1_2_v3.tsx | 111 +++++++------ .../src/plugin/Layout/Layout1_2_v4.tsx | 157 ++++++++++++++++++ .../src/plugin/Layout/Layout1_3.tsx | 43 ++--- .../src/plugin/Layout/Layout2_1_v2.tsx | 94 +++++------ .../src/plugin/Layout/Layout2_1_v3.tsx | 111 +++++++------ 14 files changed, 574 insertions(+), 404 deletions(-) create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index a118bfd29..ee7ae2edf 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -142,9 +142,9 @@ import './plugin/Layout/Layout1_2_3'; import './plugin/Layout/Layout1_1_1_v2'; import './plugin/Layout/Layout1_2_v2'; import './plugin/Layout/Layout2_1_v2'; - import './plugin/Layout/Layout1_2_v3'; import './plugin/Layout/Layout2_1_v3'; +import './plugin/Layout/Layout1_2_v4'; import {GridPlugin} from './plugin/Grid'; diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 7a68c9512..fcc53e678 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -1,10 +1,7 @@ /** * @file Flex 常见布局 1:3 */ -import { - BasePlugin, - PluginEvent -} from 'amis-editor-core'; +import {BasePlugin, PluginEvent} from 'amis-editor-core'; import {getSchemaTpl} from 'amis-editor-core'; import type { BaseEventContext, @@ -24,7 +21,8 @@ export class FlexPluginBase extends BasePlugin { isBaseComponent = true; icon = 'fa fa-columns'; pluginIcon = 'flex-container-plugin'; - description = '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; + description = + '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; docLink = '/amis/zh-CN/components/flex'; tags = ['容器']; scaffold = { @@ -54,7 +52,9 @@ export class FlexPluginBase extends BasePlugin { panelBodyCreator = (context: BaseEventContext) => { const curRendererSchema = context?.schema; - const isRowContent = curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; + const isRowContent = + curRendererSchema?.direction === 'row' || + curRendererSchema?.direction === 'row-reverse'; return [ getSchemaTpl('tabs', [ { @@ -67,20 +67,26 @@ export class FlexPluginBase extends BasePlugin { body: [ getSchemaTpl('layout:position'), getSchemaTpl('layout:inset', { - mode: 'vertical', + mode: 'vertical' }), getSchemaTpl('layout:z-index'), getSchemaTpl('layout:flexDirection', { - name: 'direction', + name: 'direction' }), getSchemaTpl('layout:justifyContent', { name: 'justify', // mode: 'vertical', // 改成上下展示模式 - label: tipedLabel(`${isRowContent ? '水平' : '垂直'}对齐方式`, '设置子元素在主轴上的对齐方式') + label: tipedLabel( + `${isRowContent ? '水平' : '垂直'}对齐方式`, + '设置子元素在主轴上的对齐方式' + ) }), getSchemaTpl('layout:alignItems', { name: 'alignItems', - label: tipedLabel(`${isRowContent ? '垂直' : '水平'}对齐方式`, '设置子元素在交叉轴上的对齐方式') + label: tipedLabel( + `${isRowContent ? '垂直' : '水平'}对齐方式`, + '设置子元素在交叉轴上的对齐方式' + ) }), getSchemaTpl('layout:isFixedHeight'), getSchemaTpl('layout:height'), @@ -90,7 +96,7 @@ export class FlexPluginBase extends BasePlugin { getSchemaTpl('layout:max-width'), getSchemaTpl('layout:overflow-x'), getSchemaTpl('layout:overflow-y'), - getSchemaTpl('layout:margin-center'), + getSchemaTpl('layout:margin-center') ] }, { @@ -111,8 +117,7 @@ export class FlexPluginBase extends BasePlugin { items: [ { type: 'tpl', - tpl: - '子节点${index | plus}' + tpl: '子节点${index | plus}' } ] } diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx index fcb192b2f..1f8090ed8 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx @@ -8,47 +8,48 @@ export class Layout1_1 extends FlexPluginBase { name = '左右均分'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：左右均分（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = + '常见布局：左右均分（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 200; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(181, 242, 167, 1)" + display: 'block', + backgroundColor: 'rgba(181, 242, 167, 1)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } - }, - ], + } + ] }; previewSchema = { ...this.scaffold diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx index dbf3433b0..e71338dac 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx @@ -8,64 +8,65 @@ export class Layout1_1_1 extends FlexPluginBase { name = '三栏均分'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：三栏均分布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = + '常见布局：三栏均分布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 300; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(181, 242, 167, 1)" + display: 'block', + backgroundColor: 'rgba(181, 242, 167, 1)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第三列", - inline: false, + type: 'tpl', + tpl: '第三列', + inline: false } ], style: { - flex: "1 1 auto", - display: "block", - flexBasis: "auto", + flex: '1 1 auto', + display: 'block', + flexBasis: 'auto', flexGrow: 1, - backgroundColor: "rgba(242, 54, 54, 0.51)" + backgroundColor: 'rgba(242, 54, 54, 0.51)' } } - ], + ] }; previewSchema = { ...this.scaffold diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx index dc69d0a66..2b46d0325 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx @@ -11,73 +11,73 @@ export class Layout1_1_1_v2 extends FlexPluginBase { description = '常见布局：上中下（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 303; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - backgroundColor: "rgba(181, 242, 167, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - backgroundColor: "rgba(245, 166, 35, 0.48)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + backgroundColor: 'rgba(245, 166, 35, 0.48)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第三列", - inline: false, + type: 'tpl', + tpl: '第三列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - backgroundColor: "rgba(74, 144, 226, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + backgroundColor: 'rgba(74, 144, 226, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } - }, + } ], - direction: "column", - justify: "center", - alignItems: "stretch", + direction: 'column', + justify: 'center', + alignItems: 'stretch' }; previewSchema = { ...this.scaffold diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx index c48ac3546..9fdc9b7d7 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx @@ -8,56 +8,57 @@ export class Layout1_1_v2 extends FlexPluginBase { name = '上下布局'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：上下布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = + '常见布局：上下布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 203; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - backgroundColor: "rgba(181, 242, 167, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - backgroundColor: "rgba(245, 166, 35, 0.48)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + backgroundColor: 'rgba(245, 166, 35, 0.48)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } - }, + } ], - direction: "column", - justify: "center", - alignItems: "stretch", + direction: 'column', + justify: 'center', + alignItems: 'stretch' }; previewSchema = { ...this.scaffold diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx index 30951bc35..067943d30 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx @@ -8,47 +8,48 @@ export class Layout1_2 extends FlexPluginBase { name = '1:2 布局'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：1:2 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = + '常见布局：1:2 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 201; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(181, 242, 167, 1)" + display: 'block', + backgroundColor: 'rgba(181, 242, 167, 1)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 2, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } - }, - ], + } + ] }; previewSchema = { ...this.scaffold diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx index 30b96e53b..0a50f4ff1 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx @@ -8,64 +8,65 @@ export class Layout1_2_3 extends FlexPluginBase { name = '1:2:3 三栏'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：1:2:3 三栏（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = + '常见布局：1:2:3 三栏（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 301; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(181, 242, 167, 1)" + display: 'block', + backgroundColor: 'rgba(181, 242, 167, 1)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 2, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第三列", - inline: false, + type: 'tpl', + tpl: '第三列', + inline: false } ], style: { - flex: "1 1 auto", - display: "block", - flexBasis: "auto", + flex: '1 1 auto', + display: 'block', + flexBasis: 'auto', flexGrow: 3, - backgroundColor: "rgba(242, 54, 54, 0.51)" + backgroundColor: 'rgba(242, 54, 54, 0.51)' } } - ], + ] }; previewSchema = { ...this.scaffold diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx index a7aff4293..0f95ea97c 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx @@ -8,92 +8,92 @@ export class Layout1_2_v2 extends FlexPluginBase { description = '常见布局：一拖二（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 303; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一行", - inline: false, + type: 'tpl', + tpl: '第一行', + inline: false } ], style: { - flex: "0 0 auto", - flexBasis: "100px", - backgroundColor: "rgba(181, 242, 167, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + flex: '0 0 auto', + flexBasis: '100px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "flex", + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(71, 92, 233, 0.68)" + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } - }, + } ], style: { - height: "100%", + height: '100%' }, - alignItems: "stretch" + alignItems: 'stretch' } ], style: { - flex: "1 1 auto", - padding: 0, + flex: '1 1 auto', + padding: 0 }, - isFixedHeight: true, - }, + isFixedHeight: true + } ], style: { - overflowX: "auto", - margin: "0", - maxWidth: "auto", - height: "350px", - overflowY: "auto" + overflowX: 'auto', + margin: '0', + maxWidth: 'auto', + height: '350px', + overflowY: 'auto' }, - direction: "column", - justify: "center", - alignItems: "stretch", + direction: 'column', + justify: 'center', + alignItems: 'stretch', isFixedHeight: true }; previewSchema = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx index b7fb6eed3..39c5a19f4 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx @@ -5,103 +5,104 @@ export class Layout1_2_v3 extends FlexPluginBase { name = '左一右二'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：左一右二（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = + '常见布局：左一右二（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 304; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一行", - inline: false, + type: 'tpl', + tpl: '第一行', + inline: false } ], style: { - flex: "0 0 auto", - flexBasis: "250px", - backgroundColor: "rgba(181, 242, 167, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + flex: '0 0 auto', + flexBasis: '250px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "flex", + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(71, 92, 233, 0.68)" + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } - }, + } ], style: { - "height": "100%", - "position": "static", - "maxHeight": "auto", - "maxWidth": "auto", - "width": "auto", - "overflowX": "auto", - "overflowY": "auto", - "margin": "0" + height: '100%', + position: 'static', + maxHeight: 'auto', + maxWidth: 'auto', + width: 'auto', + overflowX: 'auto', + overflowY: 'auto', + margin: '0' }, - alignItems: "stretch", - direction: "column", - justify: "center" + alignItems: 'stretch', + direction: 'column', + justify: 'center' } ], style: { - flex: "1 1 auto", - padding: 0, + flex: '1 1 auto', + padding: 0 } - }, + } ], style: { - overflowX: "auto", - margin: "0", - maxWidth: "auto", - height: "350px", - overflowY: "auto" + overflowX: 'auto', + margin: '0', + maxWidth: 'auto', + height: '350px', + overflowY: 'auto' }, - direction: "row", - justify: "center", - alignItems: "stretch", + direction: 'row', + justify: 'center', + alignItems: 'stretch', isFixedHeight: true }; previewSchema = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx new file mode 100644 index 000000000..3101778fa --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx @@ -0,0 +1,157 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout1_2_v4 extends FlexPluginBase { + name = '经典布局1'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = + '常见布局：经典布局1（布局容器 是基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 307; + scaffold: any = { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + backgroundColor: 'rgba(74, 144, 226, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一行', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '250px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } + } + ], + style: { + height: '100%', + position: 'static', + maxHeight: 'auto', + maxWidth: 'auto', + width: 'auto', + overflowX: 'auto', + overflowY: 'auto', + margin: '0' + }, + alignItems: 'stretch', + direction: 'column', + justify: 'center' + } + ], + style: { + flex: '1 1 auto', + padding: 0 + } + } + ], + style: { + overflowX: 'auto', + margin: '0', + maxWidth: 'auto', + height: '350px', + overflowY: 'auto' + }, + direction: 'row', + justify: 'center', + alignItems: 'stretch', + isFixedHeight: true + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + backgroundColor: 'rgba(245, 166, 35, 0.48)', + display: 'block', + paddingTop: '0', + paddingLeft: '0', + paddingBottom: '0', + paddingRight: '0' + } + } + ], + direction: 'column', + justify: 'center', + alignItems: 'stretch' + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout1_2_v4); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx index 60ca80c09..137248a86 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx @@ -8,47 +8,48 @@ export class Layout1_3 extends FlexPluginBase { name = '1:3 布局'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：1:3 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = + '常见布局：1:3 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 202; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(181, 242, 167, 1)" + display: 'block', + backgroundColor: 'rgba(181, 242, 167, 1)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 3, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } - }, - ], + } + ] }; previewSchema = { ...this.scaffold diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx index 5e921ed22..0dc154161 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx @@ -11,93 +11,93 @@ export class Layout2_1_v2 extends FlexPluginBase { description = '常见布局：一拖二（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 305; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "flex", + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(71, 92, 233, 0.68)" + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } - }, + } ], style: { - height: "100%", + height: '100%' }, - alignItems: "stretch" + alignItems: 'stretch' } ], style: { - flex: "0 0 auto", - flexBasis: "100px", - padding: 0, + flex: '0 0 auto', + flexBasis: '100px', + padding: 0 }, - isFixedHeight: true, + isFixedHeight: true }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一行", - inline: false, + type: 'tpl', + tpl: '第一行', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "200px", - backgroundColor: "rgba(181, 242, 167, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + flex: '1 1 auto', + flexBasis: '200px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } - }, + } ], style: { - overflowX: "auto", - margin: "0", - maxWidth: "auto", - height: "350px", - overflowY: "auto" + overflowX: 'auto', + margin: '0', + maxWidth: 'auto', + height: '350px', + overflowY: 'auto' }, - direction: "column", - justify: "center", - alignItems: "stretch", + direction: 'column', + justify: 'center', + alignItems: 'stretch', isFixedHeight: true }; previewSchema = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx index 41952bd6b..e943c43f6 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx @@ -5,103 +5,104 @@ export class Layout2_1_v3 extends FlexPluginBase { name = '左二右一'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：左二右一（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = + '常见布局：左二右一（布局容器 是基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 306; - scaffold:any = { - type: "flex", + scaffold: any = { + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "flex", + type: 'flex', items: [ { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一列", - inline: false, + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(71, 92, 233, 0.68)" + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第二列", - inline: false, + type: 'tpl', + tpl: '第二列', + inline: false } ], style: { - flex: "1 1 auto", - flexBasis: "auto", + flex: '1 1 auto', + flexBasis: 'auto', flexGrow: 1, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' } - }, + } ], style: { - "height": "100%", - "position": "static", - "maxHeight": "auto", - "maxWidth": "auto", - "width": "auto", - "overflowX": "auto", - "overflowY": "auto", - "margin": "0" + height: '100%', + position: 'static', + maxHeight: 'auto', + maxWidth: 'auto', + width: 'auto', + overflowX: 'auto', + overflowY: 'auto', + margin: '0' }, - alignItems: "stretch", - direction: "column", - justify: "center" + alignItems: 'stretch', + direction: 'column', + justify: 'center' } ], style: { - flex: "1 1 auto", - padding: 0, + flex: '1 1 auto', + padding: 0 } }, { - type: "wrapper", + type: 'wrapper', body: [ { - type: "tpl", - tpl: "第一行", - inline: false, + type: 'tpl', + tpl: '第一行', + inline: false } ], style: { - flex: "0 0 auto", - flexBasis: "250px", - backgroundColor: "rgba(181, 242, 167, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" + flex: '0 0 auto', + flexBasis: '250px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } - }, + } ], style: { - overflowX: "auto", - margin: "0", - maxWidth: "auto", - height: "350px", - overflowY: "auto" + overflowX: 'auto', + margin: '0', + maxWidth: 'auto', + height: '350px', + overflowY: 'auto' }, - direction: "row", - justify: "center", - alignItems: "stretch", + direction: 'row', + justify: 'center', + alignItems: 'stretch', isFixedHeight: true }; previewSchema = { From f03a85be1d2bfbe8ec5b87c232b85d475afade6c Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 29 Jun 2022 10:35:33 +0800 Subject: [PATCH 09/40] =?UTF-8?q?fix(layout):=20=E7=AE=80=E5=8C=96?= =?UTF-8?q?=E5=B8=B8=E8=A7=81=E5=B8=83=E5=B1=80=E6=95=B0=E6=8D=AE=E7=BB=93?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: If1548a11ce9ac1b0829aee1c9e07634bfdd15be9 --- .../src/plugin/Layout/Layout1_2_v2.tsx | 71 +++---- .../src/plugin/Layout/Layout1_2_v3.tsx | 85 ++++---- .../src/plugin/Layout/Layout1_2_v4.tsx | 185 ++++++++---------- .../src/plugin/Layout/Layout2_1_v2.tsx | 72 +++---- .../src/plugin/Layout/Layout2_1_v3.tsx | 84 ++++---- 5 files changed, 217 insertions(+), 280 deletions(-) diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx index 0f95ea97c..38a2aef01 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx @@ -31,57 +31,48 @@ export class Layout1_2_v2 extends FlexPluginBase { } }, { - type: 'wrapper', - body: [ + type: 'flex', + items: [ { - type: 'flex', - items: [ + type: 'wrapper', + body: [ { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - height: '100%' - }, - alignItems: 'stretch' + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } } ], style: { flex: '1 1 auto', padding: 0 }, - isFixedHeight: true + alignItems: 'stretch' } ], style: { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx index 39c5a19f4..21e77b521 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx @@ -32,65 +32,50 @@ export class Layout1_2_v3 extends FlexPluginBase { } }, { - type: 'wrapper', - body: [ + type: 'flex', + items: [ { - type: 'flex', - items: [ + type: 'wrapper', + body: [ { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - height: '100%', - position: 'static', - maxHeight: 'auto', - maxWidth: 'auto', - width: 'auto', - overflowX: 'auto', - overflowY: 'auto', - margin: '0' - }, - alignItems: 'stretch', - direction: 'column', - justify: 'center' + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } } ], style: { flex: '1 1 auto', - padding: 0 - } + margin: '0' + }, + alignItems: 'stretch', + direction: 'column', + justify: 'center' } ], style: { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx index 3101778fa..b93886d82 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx @@ -33,116 +33,103 @@ export class Layout1_2_v4 extends FlexPluginBase { } }, { - type: 'wrapper', - body: [ + type: 'flex', + items: [ { - type: 'flex', - items: [ + type: 'wrapper', + body: [ { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一行', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '250px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ], - style: { - height: '100%', - position: 'static', - maxHeight: 'auto', - maxWidth: 'auto', - width: 'auto', - overflowX: 'auto', - overflowY: 'auto', - margin: '0' - }, - alignItems: 'stretch', - direction: 'column', - justify: 'center' - } - ], - style: { - flex: '1 1 auto', - padding: 0 - } + type: 'tpl', + tpl: '第一行', + inline: false } ], style: { - overflowX: 'auto', - margin: '0', - maxWidth: 'auto', - height: '350px', - overflowY: 'auto' - }, - direction: 'row', - justify: 'center', - alignItems: 'stretch', - isFixedHeight: true + flex: '0 0 auto', + flexBasis: '250px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } + } + ], + style: { + height: '100%', + position: 'static', + maxHeight: 'auto', + maxWidth: 'auto', + width: 'auto', + overflowX: 'auto', + overflowY: 'auto', + margin: '0' + }, + alignItems: 'stretch', + direction: 'column', + justify: 'center' + } + ], + style: { + flex: '1 1 auto', + padding: 0 + } } ], style: { flex: '1 1 auto', flexBasis: 'auto', flexGrow: 1, - backgroundColor: 'rgba(245, 166, 35, 0.48)', - display: 'block', - paddingTop: '0', - paddingLeft: '0', - paddingBottom: '0', - paddingRight: '0' - } + overflowX: 'auto', + margin: '0', + maxWidth: 'auto', + height: '350px', + overflowY: 'auto' + }, + direction: 'row', + justify: 'center', + alignItems: 'stretch', + isFixedHeight: true } ], direction: 'column', diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx index 0dc154161..fc5473160 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx @@ -15,58 +15,48 @@ export class Layout2_1_v2 extends FlexPluginBase { type: 'flex', items: [ { - type: 'wrapper', - body: [ + type: 'flex', + items: [ { - type: 'flex', - items: [ + type: 'wrapper', + body: [ { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - height: '100%' - }, - alignItems: 'stretch' + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } } ], style: { flex: '0 0 auto', flexBasis: '100px', - padding: 0 }, - isFixedHeight: true + alignItems: 'stretch' }, { type: 'wrapper', diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx index e943c43f6..2f37137a9 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx @@ -13,65 +13,49 @@ export class Layout2_1_v3 extends FlexPluginBase { type: 'flex', items: [ { - type: 'wrapper', - body: [ + type: 'flex', + items: [ { - type: 'flex', - items: [ + type: 'wrapper', + body: [ { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } + type: 'tpl', + tpl: '第一列', + inline: false } ], style: { - height: '100%', - position: 'static', - maxHeight: 'auto', - maxWidth: 'auto', - width: 'auto', - overflowX: 'auto', - overflowY: 'auto', - margin: '0' - }, - alignItems: 'stretch', - direction: 'column', - justify: 'center' + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } } ], style: { flex: '1 1 auto', - padding: 0 - } + }, + alignItems: 'stretch', + direction: 'column', + justify: 'center' }, { type: 'wrapper', From bfe2bc6dcff8e49e2e2801ae83c27daed66bbdbb Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 29 Jun 2022 12:44:41 +0800 Subject: [PATCH 10/40] =?UTF-8?q?feat(layout):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=90=B8=E9=A1=B6=E5=92=8C=E5=90=B8=E5=BA=95=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E5=AE=B9=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I5869b9e9700ff02ea72f47f57acd01ff7210b883 --- packages/amis-editor/src/index.tsx | 2 + .../src/plugin/Layout/FlexPluginBase.tsx | 2 + .../src/plugin/Layout/Layout1_1.tsx | 3 +- .../src/plugin/Layout/Layout1_1_1.tsx | 3 +- .../src/plugin/Layout/Layout1_1_1_v2.tsx | 2 +- .../src/plugin/Layout/Layout1_1_v2.tsx | 3 +- .../src/plugin/Layout/Layout1_2.tsx | 3 +- .../src/plugin/Layout/Layout1_2_3.tsx | 3 +- .../src/plugin/Layout/Layout1_2_v2.tsx | 2 +- .../src/plugin/Layout/Layout1_2_v3.tsx | 3 +- .../src/plugin/Layout/Layout1_2_v4.tsx | 18 ++-- .../src/plugin/Layout/Layout1_3.tsx | 3 +- .../src/plugin/Layout/Layout2_1_v2.tsx | 4 +- .../src/plugin/Layout/Layout2_1_v3.tsx | 5 +- .../src/plugin/Layout/Layout_fixed_bottom.tsx | 87 +++++++++++++++++++ .../src/plugin/Layout/Layout_fixed_top.tsx | 87 +++++++++++++++++++ packages/amis-editor/src/tpl/layout.tsx | 61 ++++++++++--- 17 files changed, 252 insertions(+), 39 deletions(-) create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index ee7ae2edf..70f9e43df 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -145,6 +145,8 @@ import './plugin/Layout/Layout2_1_v2'; import './plugin/Layout/Layout1_2_v3'; import './plugin/Layout/Layout2_1_v3'; import './plugin/Layout/Layout1_2_v4'; +import './plugin/Layout/Layout_fixed_top'; +import './plugin/Layout/Layout_fixed_bottom'; import {GridPlugin} from './plugin/Grid'; diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index fcc53e678..87422f9d2 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -93,7 +93,9 @@ export class FlexPluginBase extends BasePlugin { getSchemaTpl('layout:isFixedWidth'), getSchemaTpl('layout:width'), getSchemaTpl('layout:max-height'), + getSchemaTpl('layout:min-height'), getSchemaTpl('layout:max-width'), + getSchemaTpl('layout:min-width'), getSchemaTpl('layout:overflow-x'), getSchemaTpl('layout:overflow-y'), getSchemaTpl('layout:margin-center') diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx index 1f8090ed8..14fb7b425 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx @@ -8,8 +8,7 @@ export class Layout1_1 extends FlexPluginBase { name = '左右均分'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：左右均分（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：左右均分布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 200; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx index e71338dac..92d735913 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx @@ -8,8 +8,7 @@ export class Layout1_1_1 extends FlexPluginBase { name = '三栏均分'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：三栏均分布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：三栏均分布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 300; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx index 2b46d0325..c5d6a807e 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx @@ -8,7 +8,7 @@ export class Layout1_1_1_v2 extends FlexPluginBase { name = '上中下'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：上中下（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：上中下布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 303; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx index 9fdc9b7d7..65d42f5ba 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx @@ -8,8 +8,7 @@ export class Layout1_1_v2 extends FlexPluginBase { name = '上下布局'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：上下布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：上下布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 203; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx index 067943d30..4a8292c7c 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx @@ -8,8 +8,7 @@ export class Layout1_2 extends FlexPluginBase { name = '1:2 布局'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：1:2 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：1:2 布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 201; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx index 0a50f4ff1..d188fefb5 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx @@ -8,8 +8,7 @@ export class Layout1_2_3 extends FlexPluginBase { name = '1:2:3 三栏'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：1:2:3 三栏（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：1:2:3 三栏布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 301; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx index 38a2aef01..54634bc8a 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx @@ -5,7 +5,7 @@ export class Layout1_2_v2 extends FlexPluginBase { name = '一拖二'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：一拖二（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：一拖二布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 303; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx index 21e77b521..fe0c412f6 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx @@ -5,8 +5,7 @@ export class Layout1_2_v3 extends FlexPluginBase { name = '左一右二'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：左一右二（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：左一右二布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 304; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx index b93886d82..58ec696f2 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx @@ -5,8 +5,7 @@ export class Layout1_2_v4 extends FlexPluginBase { name = '经典布局1'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：经典布局1（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：经典布局1（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 307; scaffold: any = { @@ -22,9 +21,7 @@ export class Layout1_2_v4 extends FlexPluginBase { } ], style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, + flex: '0 0 auto', backgroundColor: 'rgba(74, 144, 226, 1)', display: 'flex', flexDirection: 'row', @@ -123,13 +120,18 @@ export class Layout1_2_v4 extends FlexPluginBase { overflowX: 'auto', margin: '0', maxWidth: 'auto', - height: '350px', - overflowY: 'auto' + overflowY: 'auto', + position: 'static', + minWidth: 'auto', + width: 'auto', + maxHeight: 'auto', + minHeight: '300px' }, direction: 'row', justify: 'center', alignItems: 'stretch', - isFixedHeight: true + isFixedHeight: false, + isFixedWidth: 'false' } ], direction: 'column', diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx index 137248a86..bdd2184b8 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx @@ -8,8 +8,7 @@ export class Layout1_3 extends FlexPluginBase { name = '1:3 布局'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：1:3 布局（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：1:3 布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 202; scaffold: any = { diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx index fc5473160..f8cd63de1 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx @@ -8,7 +8,7 @@ export class Layout2_1_v2 extends FlexPluginBase { name = '二拖一'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = '常见布局：一拖二（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：一拖二布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 305; scaffold: any = { @@ -54,7 +54,7 @@ export class Layout2_1_v2 extends FlexPluginBase { ], style: { flex: '0 0 auto', - flexBasis: '100px', + flexBasis: '100px' }, alignItems: 'stretch' }, diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx index 2f37137a9..10edd2754 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx @@ -5,8 +5,7 @@ export class Layout2_1_v3 extends FlexPluginBase { name = '左二右一'; isBaseComponent = false; // 在自定义组件面板中展示 pluginIcon = 'flex-container-plugin'; - description = - '常见布局：左二右一（布局容器 是基于 CSS Flex 实现的布局容器）。'; + description = '常见布局：左二右一布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 306; scaffold: any = { @@ -51,7 +50,7 @@ export class Layout2_1_v3 extends FlexPluginBase { } ], style: { - flex: '1 1 auto', + flex: '1 1 auto' }, alignItems: 'stretch', direction: 'column', diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx new file mode 100644 index 000000000..f42f60ffc --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx @@ -0,0 +1,87 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout_fixed_bottom extends FlexPluginBase { + name = '吸底容器'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 501; + scaffold: any = { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(181, 242, 167, 1)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第三列', + inline: false + } + ], + style: { + flex: '1 1 auto', + display: 'block', + flexBasis: 'auto', + flexGrow: 1, + backgroundColor: 'rgba(242, 54, 54, 0.51)' + } + } + ], + style: { + position: 'fixed', + inset: 'auto auto 0 0', + zIndex: 2, + width: '100%', + overflowX: 'auto', + margin: '0', + overflowY: 'auto', + height: 'auto' + }, + isFixedWidth: true, + direction: 'row', + justify: 'center', + alignItems: 'stretch', + isFixedHeight: 'false' + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout_fixed_bottom); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx new file mode 100644 index 000000000..a6bd4c1d5 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx @@ -0,0 +1,87 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout_fixed_top extends FlexPluginBase { + name = '吸顶容器'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 502; + scaffold: any = { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(181, 242, 167, 1)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第三列', + inline: false + } + ], + style: { + flex: '1 1 auto', + display: 'block', + flexBasis: 'auto', + flexGrow: 1, + backgroundColor: 'rgba(242, 54, 54, 0.51)' + } + } + ], + style: { + position: 'fixed', + inset: '0 auto auto 0', + zIndex: 2, + width: '100%', + overflowX: 'auto', + margin: '0', + overflowY: 'auto', + height: 'auto' + }, + isFixedWidth: true, + direction: 'row', + justify: 'center', + alignItems: 'stretch', + isFixedHeight: 'false' + }; + previewSchema = { + ...this.scaffold + }; +} + +registerEditorPlugin(Layout_fixed_top); diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 83793c141..e7d0ff16c 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -480,12 +480,8 @@ setSchemaTpl( name: config?.name || 'style.flex', value: config?.value || '0 0 auto', visibleOn: config?.visibleOn, - pipeIn: (value: string) => { - return value === '1 1 auto' ? true : false; - }, - pipeOut: (value: boolean) => { - return value ? '1 1 auto' : '0 0 auto'; - }, + trueValue: '1 1 auto', + falseValue: '0 0 auto', onChange: (value: any, oldValue: boolean, model: any, form: any) => { if (!value || value === '0 0 auto') { // 非弹性模式下，剔除默认宽度和占比设置 @@ -536,9 +532,8 @@ setSchemaTpl( step: 1, label: config?.label || tipedLabel('占比设置', '定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。'), name: config?.name || 'style.flexGrow', - value: config?.value || 0, - visibleOn: config?.visibleOn, - clearable: true, + value: config?.value || 1, + visibleOn: config?.visibleOn || 'data.style && data.style.flex !== "0 0 auto"', pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; @@ -615,7 +610,7 @@ setSchemaTpl( }) => { return { type: 'input-text', - label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最多的展示宽度'), + label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最大的水平展示区域'), name: config?.name || 'style.maxWidth', value: config?.value || 'auto', visibleOn: config?.visibleOn ?? '!data.isFixedWidth', @@ -766,4 +761,50 @@ setSchemaTpl( return value ? '0 auto' : '0'; } }; +}); + +// 最小宽度设置 +setSchemaTpl( + 'layout:min-width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-text', + label: config?.label || tipedLabel('最小宽度', '最小宽度即当前元素最小的水平展示区域'), + name: config?.name || 'style.minWidth', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? '!data.isFixedWidth', + clearable: true, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 最小高度设置 +setSchemaTpl( + 'layout:min-height', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-text', + label: config?.label || tipedLabel('最小高度', '最小宽度即当前元素最小的垂直展示区域'), + name: config?.name || 'style.minHeight', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? '!data.isFixedHeight', + clearable: true, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; }); \ No newline at end of file From 5f9b9f117f28070ba564399691a7bb4d9b304233 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 29 Jun 2022 14:48:49 +0800 Subject: [PATCH 11/40] =?UTF-8?q?fix(layout):=20=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Ib2740c5ed00400b73ba2b340af70d7d4d4c29e06 --- packages/amis-editor/src/index.tsx | 3 + .../src/plugin/Layout/Layout_fixed.tsx | 45 ++++ .../src/plugin/Layout/Layout_fixed_bottom.tsx | 5 +- .../src/plugin/Layout/Layout_fixed_top.tsx | 9 +- .../src/plugin/Layout/Layout_scroll_x.tsx | 193 ++++++++++++++++++ .../src/plugin/Layout/Layout_scroll_y.tsx | 169 +++++++++++++++ packages/amis-editor/src/plugin/Wrapper.tsx | 23 ++- 7 files changed, 438 insertions(+), 9 deletions(-) create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index 70f9e43df..37f7e0dff 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -147,6 +147,9 @@ import './plugin/Layout/Layout2_1_v3'; import './plugin/Layout/Layout1_2_v4'; import './plugin/Layout/Layout_fixed_top'; import './plugin/Layout/Layout_fixed_bottom'; +import './plugin/Layout/Layout_fixed'; +import './plugin/Layout/Layout_scroll_x'; +import './plugin/Layout/Layout_scroll_y'; import {GridPlugin} from './plugin/Grid'; diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx new file mode 100644 index 000000000..446c75972 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx @@ -0,0 +1,45 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout_fixed extends FlexPluginBase { + name = '悬浮容器'; + isBaseComponent = false; // 在自定义组件面板中展示 + pluginIcon = 'flex-container-plugin'; + description = '常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 503; + scaffold: any = { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '悬浮容器', + inline: false + } + ], + style: { + backgroundColor: 'rgba(71, 92, 233, 0.68)', + position: 'fixed', + inset: 'auto 50px 50px auto', + zIndex: 10, + display: 'flex', + borderTopLeftRadius: 50, + borderTopRightRadius: 50, + borderBottomLeftRadius: 50, + borderBottomRightRadius: 50, + minWidth: '80px', + minHeight: '80px', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'stretch' + } + }; + previewSchema = { + ...this.scaffold, + style: { + position: 'static' + } + }; +} + +registerEditorPlugin(Layout_fixed); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx index f42f60ffc..a7615796e 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx @@ -80,7 +80,10 @@ export class Layout_fixed_bottom extends FlexPluginBase { isFixedHeight: 'false' }; previewSchema = { - ...this.scaffold + ...this.scaffold, + style: { + position: 'static' + } }; } diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx index a6bd4c1d5..8e14acd81 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx @@ -66,12 +66,12 @@ export class Layout_fixed_top extends FlexPluginBase { style: { position: 'fixed', inset: '0 auto auto 0', - zIndex: 2, + zIndex: 10, width: '100%', overflowX: 'auto', margin: '0', overflowY: 'auto', - height: 'auto' + height: '55px' }, isFixedWidth: true, direction: 'row', @@ -80,7 +80,10 @@ export class Layout_fixed_top extends FlexPluginBase { isFixedHeight: 'false' }; previewSchema = { - ...this.scaffold + ...this.scaffold, + style: { + position: 'static' + } }; } diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx new file mode 100644 index 000000000..4f19e8c5a --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx @@ -0,0 +1,193 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout_scroll_x extends FlexPluginBase { + name = 'x轴滚动容器'; + isBaseComponent = false; + pluginIcon = 'flex-container-plugin'; + description = '常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 505; + scaffold: any = { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一列', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '200px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '200px', + backgroundColor: 'rgba(245, 166, 35, 0.48)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第三列', + inline: false + } + ], + style: { + flex: '0 0 auto', + backgroundColor: 'rgba(74, 144, 226, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto', + flexBasis: '200px' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第四列', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '200px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第五列', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '200px', + backgroundColor: 'rgba(245, 166, 35, 0.48)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第六列', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '200px', + backgroundColor: 'rgba(74, 144, 226, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第七列', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '200px', + backgroundColor: 'rgba(228, 114, 221, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + } + ], + direction: 'row', + justify: 'flex-start', + alignItems: 'stretch', + style: { + position: 'static', + minHeight: 'auto', + maxWidth: 'auto', + minWidth: 'auto', + height: '200px', + overflowX: 'scroll', + overflowY: 'scroll', + margin: '0' + }, + isFixedHeight: true, + isFixedWidth: false + }; + previewSchema = { + ...this.scaffold, + style: { + position: 'static' + } + }; +} + +registerEditorPlugin(Layout_scroll_x); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx new file mode 100644 index 000000000..c767d3772 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx @@ -0,0 +1,169 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export class Layout_scroll_y extends FlexPluginBase { + name = 'y轴滚动容器'; + isBaseComponent = false; + pluginIcon = 'flex-container-plugin'; + description = '常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 504; + scaffold: any = { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一行', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '60px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二行', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '60px', + backgroundColor: 'rgba(245, 166, 35, 0.48)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第三行', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '60px', + backgroundColor: 'rgba(74, 144, 226, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第四行', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '60px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第五行', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '60px', + backgroundColor: 'rgba(245, 166, 35, 0.48)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第六行', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '60px', + backgroundColor: 'rgba(74, 144, 226, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + } + ], + direction: 'column', + justify: 'flex-start', + alignItems: 'stretch', + style: { + position: 'static', + minHeight: 'auto', + maxWidth: 'auto', + minWidth: 'auto', + height: '200px', + width: 'auto', + overflowX: 'auto', + overflowY: 'scroll', + margin: '0' + }, + isFixedHeight: true, + isFixedWidth: 'false' + }; + previewSchema = { + ...this.scaffold, + style: { + position: 'static' + } + }; +} + +registerEditorPlugin(Layout_scroll_y); diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index a2e015b54..fbbcd2a7a 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -46,12 +46,23 @@ export class WrapperPlugin extends BasePlugin { className: 'p-none', body: [ getSchemaTpl('collapseGroup', [ - isFlexItem ? { + { title: '布局', body: [ - getSchemaTpl('layout:flex'), - getSchemaTpl('layout:flex-basis'), - getSchemaTpl('layout:flex-grow'), + isFlexItem ? getSchemaTpl('layout:flex', { + visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', + }) : null, + isFlexItem ? getSchemaTpl('layout:flex-basis', { + visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', + }) : null, + isFlexItem ? getSchemaTpl('layout:flex-grow', { + visibleOn: 'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")', + }) : null, + getSchemaTpl('layout:position'), + getSchemaTpl('layout:inset', { + mode: 'vertical' + }), + getSchemaTpl('layout:z-index'), getSchemaTpl('layout:display'), getSchemaTpl('layout:flexDirection', { visibleOn: 'data.style && data.style.display === "flex"', @@ -62,8 +73,10 @@ export class WrapperPlugin extends BasePlugin { getSchemaTpl('layout:alignItems', { visibleOn: 'data.style && data.style.display === "flex"', }), + getSchemaTpl('layout:min-width'), + getSchemaTpl('layout:min-height'), ] - } : null, + }, { title: '常用', body: [ From 409a264f1484c7447f31c4993e7a450b77452919 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 29 Jun 2022 17:59:36 +0800 Subject: [PATCH 12/40] =?UTF-8?q?fix(layout):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=B8=B8=E8=A7=81=E5=B8=83=E5=B1=80icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Idcab50e2eed78833d4ac2fd5e98d7cbf6c34dd75 --- packages/amis-editor/src/icons/index.tsx | 31 ++++++++++++ .../src/icons/layout/layout-1with2.svg | 14 ++++++ .../src/icons/layout/layout-2cols.svg | 13 +++++ .../src/icons/layout/layout-2row.svg | 13 +++++ .../src/icons/layout/layout-2with1.svg | 14 ++++++ .../src/icons/layout/layout-3cols.svg | 14 ++++++ .../src/icons/layout/layout-3row.svg | 14 ++++++ .../src/icons/layout/layout-absolute.svg | 5 ++ .../src/icons/layout/layout-fixed.svg | 6 +++ .../src/icons/layout/layout-full.svg | 19 ++++++++ .../src/icons/layout/layout1-2.svg | 14 ++++++ .../src/icons/layout/layout2-1.svg | 14 ++++++ .../src/icons/layout/layout3-1.svg | 15 ++++++ .../src/icons/layout/layout3-2.svg | 16 +++++++ packages/amis-editor/src/plugin/Container.tsx | 47 +++++++++++++++++++ .../src/plugin/Layout/FlexPluginBase.tsx | 5 -- .../src/plugin/Layout/Layout1_1.tsx | 4 +- .../src/plugin/Layout/Layout1_1_1.tsx | 4 +- .../src/plugin/Layout/Layout1_1_1_v2.tsx | 10 ++-- .../src/plugin/Layout/Layout1_1_v2.tsx | 8 ++-- .../src/plugin/Layout/Layout1_2.tsx | 4 +- .../src/plugin/Layout/Layout1_2_3.tsx | 4 +- .../src/plugin/Layout/Layout1_2_v2.tsx | 4 +- .../src/plugin/Layout/Layout1_2_v3.tsx | 10 ++-- .../src/plugin/Layout/Layout1_2_v4.tsx | 16 +++---- .../src/plugin/Layout/Layout1_3.tsx | 4 +- .../src/plugin/Layout/Layout2_1_v2.tsx | 6 +-- .../src/plugin/Layout/Layout2_1_v3.tsx | 8 ++-- .../src/plugin/Layout/Layout_fixed.tsx | 4 +- .../src/plugin/Layout/Layout_fixed_bottom.tsx | 2 +- .../src/plugin/Layout/Layout_fixed_top.tsx | 2 +- .../src/plugin/Layout/Layout_scroll_x.tsx | 6 +-- .../src/plugin/Layout/Layout_scroll_y.tsx | 2 +- packages/amis-editor/src/tpl/layout.tsx | 14 +++--- 34 files changed, 306 insertions(+), 60 deletions(-) create mode 100644 packages/amis-editor/src/icons/layout/layout-1with2.svg create mode 100644 packages/amis-editor/src/icons/layout/layout-2cols.svg create mode 100644 packages/amis-editor/src/icons/layout/layout-2row.svg create mode 100644 packages/amis-editor/src/icons/layout/layout-2with1.svg create mode 100644 packages/amis-editor/src/icons/layout/layout-3cols.svg create mode 100644 packages/amis-editor/src/icons/layout/layout-3row.svg create mode 100644 packages/amis-editor/src/icons/layout/layout-absolute.svg create mode 100644 packages/amis-editor/src/icons/layout/layout-fixed.svg create mode 100644 packages/amis-editor/src/icons/layout/layout-full.svg create mode 100644 packages/amis-editor/src/icons/layout/layout1-2.svg create mode 100644 packages/amis-editor/src/icons/layout/layout2-1.svg create mode 100644 packages/amis-editor/src/icons/layout/layout3-1.svg create mode 100644 packages/amis-editor/src/icons/layout/layout3-2.svg diff --git a/packages/amis-editor/src/icons/index.tsx b/packages/amis-editor/src/icons/index.tsx index eaf96c01b..4b5e2df24 100644 --- a/packages/amis-editor/src/icons/index.tsx +++ b/packages/amis-editor/src/icons/index.tsx @@ -9,6 +9,7 @@ import {registerIcon, Icon} from 'amis-editor-core'; * 4. 展示类组件 icon x 23 * 5. 表单类组件 icon x 53 * 6. 其他类组件 icon x 3 + * 7. 常见布局组件 icon x 12 */ // 功能类组件 icon x 11 @@ -135,6 +136,21 @@ import propertySheet from './other/property-sheet.svg'; import tooltip from './other/tooltip.svg'; import divider from './other/divider.svg'; +// 常见布局组件 icon x 12 +import layout_absolute from './layout/layout-absolute.svg'; +import layout_fixed from './layout/layout-fixed.svg'; +import layout_1with2 from './layout/layout-1with2.svg'; +import layout_2cols from './layout/layout-2cols.svg'; +import layout_2row from './layout/layout-2row.svg'; +import layout_2with1 from './layout/layout-2with1.svg'; +import layout_3cols from './layout/layout-3cols.svg'; +import layout_3row from './layout/layout-3row.svg'; +import layout_full from './layout/layout-full.svg'; +import layout_1_2 from './layout/layout1-2.svg'; +import layout_2_1 from './layout/layout2-1.svg'; +import layout_3_1 from './layout/layout3-1.svg'; +import layout_3_2 from './layout/layout3-2.svg'; + // 功能类组件 icon x 11 registerIcon('audio-plugin', audio); registerIcon('custom-plugin', custom); @@ -257,4 +273,19 @@ registerIcon('property-sheet-plugin', propertySheet); registerIcon('tooltip-plugin', tooltip); registerIcon('divider-plugin', divider); +// 常见布局组件 icon x 13 +registerIcon('layout-absolute-plugin', layout_absolute); +registerIcon('layout-fixed-plugin', layout_fixed); +registerIcon('layout-1with2-plugin', layout_1with2); +registerIcon('layout-2cols-plugin', layout_2cols); +registerIcon('layout-2row-plugin', layout_2row); +registerIcon('layout-2with1-plugin', layout_2with1); +registerIcon('layout-3cols-plugin', layout_3cols); +registerIcon('layout-3row-plugin', layout_3row); +registerIcon('layout-full-plugin', layout_full); +registerIcon('layout-1-2-plugin', layout_1_2); +registerIcon('layout-2-1-plugin', layout_2_1); +registerIcon('layout-3-1-plugin', layout_3_1); +registerIcon('layout-3-2-plugin', layout_3_2); + export {Icon}; diff --git a/packages/amis-editor/src/icons/layout/layout-1with2.svg b/packages/amis-editor/src/icons/layout/layout-1with2.svg new file mode 100644 index 000000000..bcfbf6995 --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-1with2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout-2cols.svg b/packages/amis-editor/src/icons/layout/layout-2cols.svg new file mode 100644 index 000000000..12f8d9d27 --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-2cols.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout-2row.svg b/packages/amis-editor/src/icons/layout/layout-2row.svg new file mode 100644 index 000000000..0041ad765 --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-2row.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout-2with1.svg b/packages/amis-editor/src/icons/layout/layout-2with1.svg new file mode 100644 index 000000000..375a27e3c --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-2with1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout-3cols.svg b/packages/amis-editor/src/icons/layout/layout-3cols.svg new file mode 100644 index 000000000..5ce2423b9 --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-3cols.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout-3row.svg b/packages/amis-editor/src/icons/layout/layout-3row.svg new file mode 100644 index 000000000..8587556b6 --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-3row.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout-absolute.svg b/packages/amis-editor/src/icons/layout/layout-absolute.svg new file mode 100644 index 000000000..3ce40f7dd --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-absolute.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout-fixed.svg b/packages/amis-editor/src/icons/layout/layout-fixed.svg new file mode 100644 index 000000000..2272371ee --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-fixed.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout-full.svg b/packages/amis-editor/src/icons/layout/layout-full.svg new file mode 100644 index 000000000..a828243d8 --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout-full.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout1-2.svg b/packages/amis-editor/src/icons/layout/layout1-2.svg new file mode 100644 index 000000000..05f7bc3ed --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout1-2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout2-1.svg b/packages/amis-editor/src/icons/layout/layout2-1.svg new file mode 100644 index 000000000..6b7b1d536 --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout2-1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout3-1.svg b/packages/amis-editor/src/icons/layout/layout3-1.svg new file mode 100644 index 000000000..b2c9586fe --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout3-1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/layout/layout3-2.svg b/packages/amis-editor/src/icons/layout/layout3-2.svg new file mode 100644 index 000000000..9e44c7f67 --- /dev/null +++ b/packages/amis-editor/src/icons/layout/layout3-2.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index a294b556e..ff88e6e8c 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -1,6 +1,7 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {BaseEventContext, BasePlugin, RegionConfig} from 'amis-editor-core'; import {defaultValue, getSchemaTpl} from 'amis-editor-core'; +import {tipedLabel} from '../component/BaseControl'; export class ContainerPlugin extends BasePlugin { // 关联渲染器名字 @@ -34,6 +35,11 @@ export class ContainerPlugin extends BasePlugin { panelJustify = true; panelBodyCreator = (context: BaseEventContext) => { + const curRendererSchema = context?.schema; + const isRowContent = + curRendererSchema?.direction === 'row' || + curRendererSchema?.direction === 'row-reverse'; + return getSchemaTpl('tabs', [ { title: '属性', @@ -68,6 +74,47 @@ export class ContainerPlugin extends BasePlugin { } ] }, + { + title: '布局', + body: [ + getSchemaTpl('layout:position'), + getSchemaTpl('layout:inset', { + mode: 'vertical' + }), + getSchemaTpl('layout:z-index'), + getSchemaTpl('layout:display'), + + getSchemaTpl('layout:flexDirection', { + visibleOn: 'data.style && data.style.display === "flex"', + }), + getSchemaTpl('layout:justifyContent', { + visibleOn: 'data.style && data.style.display === "flex"', + label: tipedLabel( + `${isRowContent ? '水平' : '垂直'}对齐方式`, + '设置子元素在主轴上的对齐方式' + ) + }), + getSchemaTpl('layout:alignItems', { + visibleOn: 'data.style && data.style.display === "flex"', + label: tipedLabel( + `${isRowContent ? '垂直' : '水平'}对齐方式`, + '设置子元素在交叉轴上的对齐方式' + ) + }), + + getSchemaTpl('layout:isFixedHeight'), + getSchemaTpl('layout:height'), + getSchemaTpl('layout:isFixedWidth'), + getSchemaTpl('layout:width'), + getSchemaTpl('layout:max-height'), + getSchemaTpl('layout:min-height'), + getSchemaTpl('layout:max-width'), + getSchemaTpl('layout:min-width'), + getSchemaTpl('layout:overflow-x'), + getSchemaTpl('layout:overflow-y'), + getSchemaTpl('layout:margin-center') + ] + }, getSchemaTpl('status'), ]) }, diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 87422f9d2..51746770f 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -16,7 +16,6 @@ export class FlexPluginBase extends BasePlugin { $schema = '/schemas/FlexSchema.json'; disabledRendererPlugin = false; - // 组件名称 name = '布局容器'; isBaseComponent = true; icon = 'fa fa-columns'; @@ -75,7 +74,6 @@ export class FlexPluginBase extends BasePlugin { }), getSchemaTpl('layout:justifyContent', { name: 'justify', - // mode: 'vertical', // 改成上下展示模式 label: tipedLabel( `${isRowContent ? '水平' : '垂直'}对齐方式`, '设置子元素在主轴上的对齐方式' @@ -151,9 +149,6 @@ export class FlexPluginBase extends BasePlugin { { key: 'items', label: '子节点集合', - // 复写渲染器里面的 render 方法 - renderMethod: 'render', - dndMode: 'position-h' } ]; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx index 14fb7b425..8ef37bc9e 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx @@ -6,8 +6,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_1 extends FlexPluginBase { name = '左右均分'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-2cols-plugin'; description = '常见布局：左右均分布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 200; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx index 92d735913..e5a17dbc7 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx @@ -6,8 +6,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_1_1 extends FlexPluginBase { name = '三栏均分'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-3cols-plugin'; description = '常见布局：三栏均分布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 300; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx index c5d6a807e..a5880f17b 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx @@ -6,8 +6,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_1_1_v2 extends FlexPluginBase { name = '上中下'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-3row-plugin'; description = '常见布局：上中下布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 303; @@ -19,7 +19,7 @@ export class Layout1_1_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '第一行', inline: false } ], @@ -39,7 +39,7 @@ export class Layout1_1_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第二列', + tpl: '第二行', inline: false } ], @@ -59,7 +59,7 @@ export class Layout1_1_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第三列', + tpl: '第三行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx index 65d42f5ba..e04f61935 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx @@ -6,8 +6,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_1_v2 extends FlexPluginBase { name = '上下布局'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-2row-plugin'; description = '常见布局：上下布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 203; @@ -19,7 +19,7 @@ export class Layout1_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '第一行', inline: false } ], @@ -39,7 +39,7 @@ export class Layout1_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第二列', + tpl: '第二行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx index 4a8292c7c..24b57fe6d 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx @@ -6,8 +6,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_2 extends FlexPluginBase { name = '1:2 布局'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-2cols-plugin'; description = '常见布局：1:2 布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 201; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx index d188fefb5..9694d3f94 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx @@ -6,8 +6,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_2_3 extends FlexPluginBase { name = '1:2:3 三栏'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-3cols-plugin'; description = '常见布局：1:2:3 三栏布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 301; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx index 54634bc8a..3465533d4 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx @@ -3,8 +3,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_2_v2 extends FlexPluginBase { name = '一拖二'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-1with2-plugin'; description = '常见布局：一拖二布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 303; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx index fe0c412f6..ed5a82b9b 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx @@ -3,8 +3,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_2_v3 extends FlexPluginBase { name = '左一右二'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-1-2-plugin'; description = '常见布局：左一右二布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 304; @@ -16,7 +16,7 @@ export class Layout1_2_v3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: '第一列', inline: false } ], @@ -38,7 +38,7 @@ export class Layout1_2_v3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '第一行', inline: false } ], @@ -55,7 +55,7 @@ export class Layout1_2_v3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第二列', + tpl: '第二行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx index 58ec696f2..6c0e5b6b5 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx @@ -2,10 +2,10 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_2_v4 extends FlexPluginBase { - name = '经典布局1'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; - description = '常见布局：经典布局1（基于 CSS Flex 实现的布局容器）。'; + name = '经典布局'; + isBaseComponent = false; + pluginIcon = 'layout-3-1-plugin'; + description = '常见布局：经典布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 307; scaffold: any = { @@ -16,7 +16,7 @@ export class Layout1_2_v4 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '第一行', inline: false } ], @@ -37,7 +37,7 @@ export class Layout1_2_v4 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: '第一列', inline: false } ], @@ -62,7 +62,7 @@ export class Layout1_2_v4 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '第一行', inline: false } ], @@ -79,7 +79,7 @@ export class Layout1_2_v4 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第二列', + tpl: '第二行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx index bdd2184b8..8bb3c984d 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx @@ -6,8 +6,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout1_3 extends FlexPluginBase { name = '1:3 布局'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-2cols-plugin'; description = '常见布局：1:3 布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 202; diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx index f8cd63de1..067c392c9 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx @@ -7,8 +7,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout2_1_v2 extends FlexPluginBase { name = '二拖一'; isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; - description = '常见布局：一拖二布局（基于 CSS Flex 实现的布局容器）。'; + pluginIcon = 'layout-2with1-plugin'; + description = '常见布局：二拖一布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 305; scaffold: any = { @@ -63,7 +63,7 @@ export class Layout2_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: '第二行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx index 10edd2754..513d87f32 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx @@ -4,7 +4,7 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout2_1_v3 extends FlexPluginBase { name = '左二右一'; isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + pluginIcon = 'layout-2-1-plugin'; description = '常见布局：左二右一布局（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 306; @@ -19,7 +19,7 @@ export class Layout2_1_v3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '第一行', inline: false } ], @@ -36,7 +36,7 @@ export class Layout2_1_v3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第二列', + tpl: '第二行', inline: false } ], @@ -61,7 +61,7 @@ export class Layout2_1_v3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: '第二列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx index 446c75972..d393f2112 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx @@ -3,8 +3,8 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout_fixed extends FlexPluginBase { name = '悬浮容器'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'flex-container-plugin'; + isBaseComponent = false; + pluginIcon = 'layout-fixed-plugin'; description = '常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 503; diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx index a7615796e..a7667a2cd 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx @@ -3,7 +3,7 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout_fixed_bottom extends FlexPluginBase { name = '吸底容器'; - isBaseComponent = false; // 在自定义组件面板中展示 + isBaseComponent = false; pluginIcon = 'flex-container-plugin'; description = '常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx index 8e14acd81..cb6231007 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx @@ -3,7 +3,7 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout_fixed_top extends FlexPluginBase { name = '吸顶容器'; - isBaseComponent = false; // 在自定义组件面板中展示 + isBaseComponent = false; pluginIcon = 'flex-container-plugin'; description = '常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx index 4f19e8c5a..70d1b714e 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx @@ -4,7 +4,7 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout_scroll_x extends FlexPluginBase { name = 'x轴滚动容器'; isBaseComponent = false; - pluginIcon = 'flex-container-plugin'; + pluginIcon = 'layout-3cols-plugin'; description = '常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 505; @@ -172,12 +172,12 @@ export class Layout_scroll_x extends FlexPluginBase { style: { position: 'static', minHeight: 'auto', - maxWidth: 'auto', + maxWidth: '1080px', minWidth: 'auto', height: '200px', overflowX: 'scroll', overflowY: 'scroll', - margin: '0' + margin: '0 auto' }, isFixedHeight: true, isFixedWidth: false diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx index c767d3772..9ae8045ae 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx @@ -4,7 +4,7 @@ import {FlexPluginBase} from './FlexPluginBase'; export class Layout_scroll_y extends FlexPluginBase { name = 'y轴滚动容器'; isBaseComponent = false; - pluginIcon = 'flex-container-plugin'; + pluginIcon = 'layout-3row-plugin'; description = '常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。'; tags = ['常见布局']; order = 504; diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index e7d0ff16c..5260ca4b0 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -378,8 +378,9 @@ setSchemaTpl( pipeOut: config?.pipeOut, onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { if (value) { - // 固定高度时，剔除最大高度 + // 固定高度时，剔除最大高度、最小高度 form.setValueByName('style.maxHeight', undefined); + form.setValueByName('style.minHeight', undefined); } else { // 非固定高度时，剔除高度数值 form.setValueByName('style.height', undefined); @@ -409,8 +410,9 @@ setSchemaTpl( pipeOut: config?.pipeOut, onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { if (value) { - // 固定宽度时，剔除最大宽度 + // 固定宽度时，剔除最大宽度、最小宽度 form.setValueByName('style.maxWidth', undefined); + form.setValueByName('style.minWidth', undefined); } else { // 非固定宽度时，剔除宽度数值 form.setValueByName('style.width', undefined); @@ -612,7 +614,7 @@ setSchemaTpl( type: 'input-text', label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最大的水平展示区域'), name: config?.name || 'style.maxWidth', - value: config?.value || 'auto', + value: config?.value, visibleOn: config?.visibleOn ?? '!data.isFixedWidth', clearable: true, pipeIn: config?.pipeIn, @@ -635,7 +637,7 @@ setSchemaTpl( type: 'input-text', label: config?.label || tipedLabel('最大高度', '最大高度即当前元素最多的展示高度'), name: config?.name || 'style.maxHeight', - value: config?.value || 'auto', + value: config?.value, visibleOn: config?.visibleOn ?? '!data.isFixedHeight', clearable: true, pipeIn: config?.pipeIn, @@ -778,7 +780,7 @@ setSchemaTpl( type: 'input-text', label: config?.label || tipedLabel('最小宽度', '最小宽度即当前元素最小的水平展示区域'), name: config?.name || 'style.minWidth', - value: config?.value || 'auto', + value: config?.value, visibleOn: config?.visibleOn ?? '!data.isFixedWidth', clearable: true, pipeIn: config?.pipeIn, @@ -801,7 +803,7 @@ setSchemaTpl( type: 'input-text', label: config?.label || tipedLabel('最小高度', '最小宽度即当前元素最小的垂直展示区域'), name: config?.name || 'style.minHeight', - value: config?.value || 'auto', + value: config?.value, visibleOn: config?.visibleOn ?? '!data.isFixedHeight', clearable: true, pipeIn: config?.pipeIn, From 55c52cfae3d4a386fa2a3a3f47d0056d3f22307c Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 29 Jun 2022 21:18:53 +0800 Subject: [PATCH 13/40] =?UTF-8?q?fix:=20=E6=94=B9=E7=94=A8=E5=B8=A6?= =?UTF-8?q?=E5=8D=95=E4=BD=8D=E7=9A=84number=E7=BB=84=E4=BB=B6=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E5=8D=95=E4=BD=8D=E7=B1=BB=E6=95=B0=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: If0db4a255fe95585a6bd0f2b49f4335f557200ca --- packages/amis-editor/src/plugin/Container.tsx | 10 + .../src/plugin/Layout/FlexPluginBase.tsx | 11 + .../src/plugin/Layout/Layout1_1.tsx | 2 +- .../src/plugin/Layout/Layout1_1_1.tsx | 2 +- .../src/plugin/Layout/Layout1_1_1_v2.tsx | 2 +- .../src/plugin/Layout/Layout1_1_v2.tsx | 2 +- .../src/plugin/Layout/Layout1_2.tsx | 2 +- .../src/plugin/Layout/Layout1_2_3.tsx | 2 +- .../src/plugin/Layout/Layout1_2_v2.tsx | 2 +- .../src/plugin/Layout/Layout1_2_v3.tsx | 2 +- .../src/plugin/Layout/Layout1_2_v4.tsx | 236 +++++++++-------- .../src/plugin/Layout/Layout1_3.tsx | 2 +- .../src/plugin/Layout/Layout2_1_v2.tsx | 2 +- .../src/plugin/Layout/Layout2_1_v3.tsx | 2 +- .../src/plugin/Layout/Layout_fixed_bottom.tsx | 19 +- .../src/plugin/Layout/Layout_fixed_top.tsx | 4 +- .../src/plugin/Layout/Layout_scroll_x.tsx | 2 +- .../src/plugin/Layout/Layout_scroll_y.tsx | 4 +- packages/amis-editor/src/plugin/Wrapper.tsx | 6 +- packages/amis-editor/src/tpl/layout.tsx | 237 ++++++++++-------- 20 files changed, 297 insertions(+), 254 deletions(-) diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index ff88e6e8c..a24d48d6f 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -39,6 +39,7 @@ export class ContainerPlugin extends BasePlugin { const isRowContent = curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; + const isFlexItem = this.manager?.isFlexItem(context?.id); return getSchemaTpl('tabs', [ { @@ -77,6 +78,15 @@ export class ContainerPlugin extends BasePlugin { { title: '布局', body: [ + isFlexItem ? getSchemaTpl('layout:flex', { + visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', + }) : null, + isFlexItem ? getSchemaTpl('layout:flex-grow', { + visibleOn: 'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")', + }) : null, + isFlexItem ? getSchemaTpl('layout:flex-basis', { + visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', + }) : null, getSchemaTpl('layout:position'), getSchemaTpl('layout:inset', { mode: 'vertical' diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 51746770f..c46df92c6 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -54,6 +54,8 @@ export class FlexPluginBase extends BasePlugin { const isRowContent = curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; + const isFlexItem = this.manager?.isFlexItem(context?.id); + return [ getSchemaTpl('tabs', [ { @@ -64,6 +66,15 @@ export class FlexPluginBase extends BasePlugin { { title: '布局', body: [ + isFlexItem ? getSchemaTpl('layout:flex', { + visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', + }) : null, + isFlexItem ? getSchemaTpl('layout:flex-grow', { + visibleOn: 'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")', + }) : null, + isFlexItem ? getSchemaTpl('layout:flex-basis', { + visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', + }) : null, getSchemaTpl('layout:position'), getSchemaTpl('layout:inset', { mode: 'vertical' diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx index 8ef37bc9e..88972e159 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx @@ -19,7 +19,7 @@ export class Layout1_1 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '左右均分布局：第一列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx index e5a17dbc7..834554fc4 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx @@ -19,7 +19,7 @@ export class Layout1_1_1 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '三栏均分布局：第一列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx index a5880f17b..493acaff7 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx @@ -19,7 +19,7 @@ export class Layout1_1_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: '上中下布局：第一行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx index e04f61935..8e6a40274 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx @@ -19,7 +19,7 @@ export class Layout1_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: '上下布局：第一行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx index 24b57fe6d..09839fbb5 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx @@ -19,7 +19,7 @@ export class Layout1_2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '1:2 布局：第一列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx index 9694d3f94..4ff56875f 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx @@ -19,7 +19,7 @@ export class Layout1_2_3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '1:2:3 三栏布局：第一列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx index 3465533d4..158e3f678 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx @@ -16,7 +16,7 @@ export class Layout1_2_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: '一拖二布局：第一行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx index ed5a82b9b..129a60304 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx @@ -16,7 +16,7 @@ export class Layout1_2_v3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '一拖二布局：第一列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx index 6c0e5b6b5..b77b6cc51 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx @@ -9,135 +9,125 @@ export class Layout1_2_v4 extends FlexPluginBase { tags = ['常见布局']; order = 307; scaffold: any = { - type: 'flex', + type: "flex", items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一行', - inline: false - } - ], - style: { - flex: '0 0 auto', - backgroundColor: 'rgba(74, 144, 226, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'flex', - items: [ - { - type: 'wrapper', + { + type: "wrapper", body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } + { + type: "tpl", + tpl: "经典布局：第一行", + inline: false, + } ], style: { - flex: '0 0 auto', - flexBasis: '250px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ], - style: { - height: '100%', - position: 'static', - maxHeight: 'auto', - maxWidth: 'auto', - width: 'auto', - overflowX: 'auto', - overflowY: 'auto', - margin: '0' - }, - alignItems: 'stretch', - direction: 'column', - justify: 'center' - } - ], - style: { - flex: '1 1 auto', - padding: 0 - } - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - overflowX: 'auto', - margin: '0', - maxWidth: 'auto', - overflowY: 'auto', - position: 'static', - minWidth: 'auto', - width: 'auto', - maxHeight: 'auto', - minHeight: '300px' + flex: "0 0 auto", + backgroundColor: "rgba(74, 144, 226, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + }, }, - direction: 'row', - justify: 'center', - alignItems: 'stretch', - isFixedHeight: false, - isFixedWidth: 'false' - } + { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一列", + inline: false, + } + ], + style: { + flex: "0 0 auto", + flexBasis: "250px", + backgroundColor: "rgba(181, 242, 167, 1)", + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "stretch" + }, + }, + { + type: "flex", + items: [ + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第一行", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(71, 92, 233, 0.68)" + }, + }, + { + type: "wrapper", + body: [ + { + type: "tpl", + tpl: "第二行", + inline: false, + } + ], + style: { + flex: "1 1 auto", + flexBasis: "auto", + flexGrow: 1, + display: "block", + backgroundColor: "rgba(245, 166, 35, 0.48)" + }, + } + ], + style: { + position: "static", + overflowX: "auto", + overflowY: "auto", + margin: "0", + flex: "1 1 auto", + flexGrow: 1, + flexBasis: "auto" + }, + alignItems: "stretch", + direction: "column", + justify: "center", + isFixedHeight: false, + isFixedWidth: false + } + ], + style: { + flex: "1 1 auto", + overflowX: "auto", + margin: "0", + maxWidth: "auto", + overflowY: "auto", + position: "static", + minWidth: "auto", + width: "auto", + maxHeight: "auto", + minHeight: "300px" + }, + direction: "row", + justify: "flex-start", + alignItems: "stretch", + isFixedHeight: false, + isFixedWidth: false, + } ], - direction: 'column', - justify: 'center', - alignItems: 'stretch' - }; + direction: "column", + justify: "center", + alignItems: "stretch", +}; previewSchema = { ...this.scaffold }; diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx index 8bb3c984d..6224fd728 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx @@ -19,7 +19,7 @@ export class Layout1_3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '1:3 布局：第一列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx index 067c392c9..13dd65119 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx @@ -22,7 +22,7 @@ export class Layout2_1_v2 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '二拖一布局：第一列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx index 513d87f32..c9bf26652 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx @@ -19,7 +19,7 @@ export class Layout2_1_v3 extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: '左二右一布局：第一行', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx index a7667a2cd..ee561d2c4 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx @@ -16,7 +16,7 @@ export class Layout_fixed_bottom extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '吸底容器：第一列', inline: false } ], @@ -24,7 +24,10 @@ export class Layout_fixed_bottom extends FlexPluginBase { flex: '1 1 auto', flexBasis: 'auto', flexGrow: 1, - display: 'block', + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "stretch", backgroundColor: 'rgba(181, 242, 167, 1)' } }, @@ -41,7 +44,10 @@ export class Layout_fixed_bottom extends FlexPluginBase { flex: '1 1 auto', flexBasis: 'auto', flexGrow: 1, - display: 'block', + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "stretch", backgroundColor: 'rgba(245, 166, 35, 0.48)' } }, @@ -56,9 +62,12 @@ export class Layout_fixed_bottom extends FlexPluginBase { ], style: { flex: '1 1 auto', - display: 'block', flexBasis: 'auto', flexGrow: 1, + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "stretch", backgroundColor: 'rgba(242, 54, 54, 0.51)' } } @@ -77,7 +86,7 @@ export class Layout_fixed_bottom extends FlexPluginBase { direction: 'row', justify: 'center', alignItems: 'stretch', - isFixedHeight: 'false' + isFixedHeight: false }; previewSchema = { ...this.scaffold, diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx index cb6231007..84ac25a48 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx @@ -16,7 +16,7 @@ export class Layout_fixed_top extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: '吸顶容器：第一列', inline: false } ], @@ -77,7 +77,7 @@ export class Layout_fixed_top extends FlexPluginBase { direction: 'row', justify: 'center', alignItems: 'stretch', - isFixedHeight: 'false' + isFixedHeight: false }; previewSchema = { ...this.scaffold, diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx index 70d1b714e..33bac9761 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx @@ -16,7 +16,7 @@ export class Layout_scroll_x extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一列', + tpl: 'x轴滚动容器：第一列', inline: false } ], diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx index 9ae8045ae..8bfbb3afd 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx @@ -16,7 +16,7 @@ export class Layout_scroll_y extends FlexPluginBase { body: [ { type: 'tpl', - tpl: '第一行', + tpl: 'y轴滚动容器：第一行', inline: false } ], @@ -156,7 +156,7 @@ export class Layout_scroll_y extends FlexPluginBase { margin: '0' }, isFixedHeight: true, - isFixedWidth: 'false' + isFixedWidth: false }; previewSchema = { ...this.scaffold, diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index fbbcd2a7a..47f2d5731 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -52,12 +52,12 @@ export class WrapperPlugin extends BasePlugin { isFlexItem ? getSchemaTpl('layout:flex', { visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', }) : null, - isFlexItem ? getSchemaTpl('layout:flex-basis', { - visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', - }) : null, isFlexItem ? getSchemaTpl('layout:flex-grow', { visibleOn: 'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")', }) : null, + isFlexItem ? getSchemaTpl('layout:flex-basis', { + visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', + }) : null, getSchemaTpl('layout:position'), getSchemaTpl('layout:inset', { mode: 'vertical' diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 5260ca4b0..065294af6 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -7,6 +7,15 @@ import isString from 'lodash/isString'; * 布局相关配置项 */ +// 默认支持的单位 +const LayoutUnitOptions = [ + "px", + "%", + "em", + "vh", + "vw" +]; + // 定位模式 setSchemaTpl( 'layout:position', @@ -71,6 +80,102 @@ setSchemaTpl( } }); +// inset 配置: +setSchemaTpl( + 'layout:inset', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + }) => { + const configSchema = { + type: 'inset-box-model', + label: config?.label || tipedLabel('布局位置', '指定当前容器元素的定位位置，用于配置 top、right、bottom、left。'), + name: config?.name || 'style.inset', + value: config?.value || 'auto', + visibleOn: config?.visibleOn ?? 'data.style && data.style.position && data.style.position !== "static"', + pipeIn: (value: any) => { + let curValue = value || 'auto'; + if (isNumber(curValue)) { + curValue = curValue.toString(); + } if (!isString(curValue)) { + curValue = '0'; + } + const inset = curValue.split(' '); + return { + insetTop: inset[0] || 'auto', + insetRight: inset[1] || 'auto', + insetBottom: inset[2] || inset[0] || 'auto', + insetLeft: inset[3] || inset[1] || 'auto', + }; + }, + pipeOut: (value: any) => { + console.log('pipeOut:', value); + return `${value.insetTop ?? 'auto'} ${value.insetRight ?? 'auto'} ${value.insetBottom ?? 'auto'} ${value.insetLeft ?? 'auto'}`; + } + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + +// z-index 配置: +setSchemaTpl( + 'layout:z-index', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'input-number', + label: config?.label || tipedLabel('层级', '指定元素的堆叠顺序，层级高的元素总是会处于较低层级元素的上面。'), + name: config?.name || 'style.zIndex', + value: config?.value || '0', + visibleOn: config?.visibleOn ?? 'data.style && data.style.position && data.style.position !== "static"', + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + // 主轴排列方向 setSchemaTpl( 'layout:justifyContent', @@ -261,102 +366,6 @@ setSchemaTpl( } }); -// inset 配置: -setSchemaTpl( - 'layout:inset', - (config?: { - mode?: string; - label?: string; - name?: string; - value?: string, - visibleOn?: string; - }) => { - const configSchema = { - type: 'inset-box-model', - label: config?.label || tipedLabel('布局位置', '指定当前容器元素的定位位置，用于配置 top、right、bottom、left。'), - name: config?.name || 'style.inset', - value: config?.value || 'auto', - visibleOn: config?.visibleOn ?? 'data.style && data.style.position && data.style.position !== "static"', - pipeIn: (value: any) => { - let curValue = value || 'auto'; - if (isNumber(curValue)) { - curValue = curValue.toString(); - } if (!isString(curValue)) { - curValue = '0'; - } - const inset = curValue.split(' '); - return { - insetTop: inset[0] || 'auto', - insetRight: inset[1] || 'auto', - insetBottom: inset[2] || inset[0] || 'auto', - insetLeft: inset[3] || inset[1] || 'auto', - }; - }, - pipeOut: (value: any) => { - console.log('pipeOut:', value); - return `${value.insetTop ?? 'auto'} ${value.insetRight ?? 'auto'} ${value.insetBottom ?? 'auto'} ${value.insetLeft ?? 'auto'}`; - } - } - - if (config?.mode === 'vertical') { - // 上下展示，可避免 自定义渲染器 出现挤压 - return { - type: 'group', - mode: 'vertical', - visibleOn: config?.visibleOn, - body: [ - { - ...configSchema - } - ] - }; - } else { - // 默认左右展示 - return configSchema; - } -}); - -// z-index 配置: -setSchemaTpl( - 'layout:z-index', - (config?: { - mode?: string; - label?: string; - name?: string; - value?: string, - visibleOn?: string; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - const configSchema = { - type: 'input-number', - label: config?.label || tipedLabel('层级', '指定元素的堆叠顺序，层级高的元素总是会处于较低层级元素的上面。'), - name: config?.name || 'style.zIndex', - value: config?.value || '0', - visibleOn: config?.visibleOn ?? 'data.style && data.style.position && data.style.position !== "static"', - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - - } - - if (config?.mode === 'vertical') { - // 上下展示，可避免 自定义渲染器 出现挤压 - return { - type: 'group', - mode: 'vertical', - visibleOn: config?.visibleOn, - body: [ - { - ...configSchema - } - ] - }; - } else { - // 默认左右展示 - return configSchema; - } -}); - // 是否固定高度: isFixedHeight 配置: setSchemaTpl( 'layout:isFixedHeight', @@ -372,7 +381,7 @@ setSchemaTpl( type: 'switch', label: config?.label || '固定高度', name: config?.name || 'isFixedHeight', - value: config?.value || 'false', + value: config?.value || false, visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, @@ -404,7 +413,7 @@ setSchemaTpl( type: 'switch', label: config?.label || '固定宽度', name: config?.name || 'isFixedWidth', - value: config?.value || 'false', + value: config?.value || false, visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, @@ -429,16 +438,18 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; + unitOptions?: Array; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { return { - type: 'input-text', + type: 'input-number', label: config?.label || '高度', name: config?.name || 'style.height', - value: config?.value || 'auto', + value: config?.value || '300px', visibleOn: config?.visibleOn ?? 'data.isFixedHeight', clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; @@ -452,16 +463,18 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; + unitOptions?: Array; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { return { - type: 'input-text', + type: 'input-number', label: config?.label || '宽度', name: config?.name || 'style.width', - value: config?.value || 'auto', + value: config?.value || '300px', visibleOn: config?.visibleOn ?? 'data.isFixedWidth', clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; @@ -502,16 +515,18 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; + unitOptions?: Array; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { return { - type: 'input-text', + type: 'input-number', label: config?.label || tipedLabel('默认宽度', '定义在分配多余空间之前，项目占据的主轴空间（main size）'), name: config?.name || 'style.flexBasis', value: config?.value || 'auto', visibleOn: config?.visibleOn, clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; @@ -607,16 +622,18 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; + unitOptions?: Array; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { return { - type: 'input-text', + type: 'input-number', label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最大的水平展示区域'), name: config?.name || 'style.maxWidth', value: config?.value, visibleOn: config?.visibleOn ?? '!data.isFixedWidth', clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; @@ -630,16 +647,18 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; + unitOptions?: Array; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { return { - type: 'input-text', + type: 'input-number', label: config?.label || tipedLabel('最大高度', '最大高度即当前元素最多的展示高度'), name: config?.name || 'style.maxHeight', value: config?.value, visibleOn: config?.visibleOn ?? '!data.isFixedHeight', clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; @@ -773,16 +792,18 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; + unitOptions?: Array; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { return { - type: 'input-text', + type: 'input-number', label: config?.label || tipedLabel('最小宽度', '最小宽度即当前元素最小的水平展示区域'), name: config?.name || 'style.minWidth', value: config?.value, visibleOn: config?.visibleOn ?? '!data.isFixedWidth', clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; @@ -796,16 +817,18 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; + unitOptions?: Array; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { return { - type: 'input-text', + type: 'input-number', label: config?.label || tipedLabel('最小高度', '最小宽度即当前元素最小的垂直展示区域'), name: config?.name || 'style.minHeight', value: config?.value, visibleOn: config?.visibleOn ?? '!data.isFixedHeight', clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, }; From c797e1a984d970e0139503cc25561a0a1a216ca8 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Thu, 30 Jun 2022 11:23:29 +0800 Subject: [PATCH 14/40] =?UTF-8?q?fix:=20=E7=BB=86=E8=8A=82=E5=AE=8C?= =?UTF-8?q?=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Iadfd13ad374b01345b6a8c1427517981bc979937 --- packages/amis-editor/src/plugin/Container.tsx | 13 +- .../src/plugin/Layout/FlexPluginBase.tsx | 12 +- packages/amis-editor/src/plugin/Wrapper.tsx | 17 +- packages/amis-editor/src/tpl/layout.tsx | 515 ++++++++++-------- 4 files changed, 330 insertions(+), 227 deletions(-) diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index a24d48d6f..848fec6b3 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -111,18 +111,23 @@ export class ContainerPlugin extends BasePlugin { '设置子元素在交叉轴上的对齐方式' ) }), + getSchemaTpl('layout:flex-wrap', { + visibleOn: 'data.style && data.style.display === "flex"', + }), getSchemaTpl('layout:isFixedHeight'), getSchemaTpl('layout:height'), - getSchemaTpl('layout:isFixedWidth'), - getSchemaTpl('layout:width'), getSchemaTpl('layout:max-height'), getSchemaTpl('layout:min-height'), + getSchemaTpl('layout:overflow-y'), + + getSchemaTpl('layout:isFixedWidth'), + getSchemaTpl('layout:width'), getSchemaTpl('layout:max-width'), getSchemaTpl('layout:min-width'), getSchemaTpl('layout:overflow-x'), - getSchemaTpl('layout:overflow-y'), - getSchemaTpl('layout:margin-center') + + !isFlexItem ? getSchemaTpl('layout:margin-center') : null, ] }, getSchemaTpl('status'), diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index c46df92c6..abf23945c 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -97,17 +97,21 @@ export class FlexPluginBase extends BasePlugin { '设置子元素在交叉轴上的对齐方式' ) }), + getSchemaTpl('layout:flex-wrap'), + getSchemaTpl('layout:isFixedHeight'), getSchemaTpl('layout:height'), - getSchemaTpl('layout:isFixedWidth'), - getSchemaTpl('layout:width'), getSchemaTpl('layout:max-height'), getSchemaTpl('layout:min-height'), + getSchemaTpl('layout:overflow-y'), + + getSchemaTpl('layout:isFixedWidth'), + getSchemaTpl('layout:width'), getSchemaTpl('layout:max-width'), getSchemaTpl('layout:min-width'), getSchemaTpl('layout:overflow-x'), - getSchemaTpl('layout:overflow-y'), - getSchemaTpl('layout:margin-center') + + !isFlexItem ? getSchemaTpl('layout:margin-center') : null, ] }, { diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index 47f2d5731..2dc84c039 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -73,8 +73,23 @@ export class WrapperPlugin extends BasePlugin { getSchemaTpl('layout:alignItems', { visibleOn: 'data.style && data.style.display === "flex"', }), - getSchemaTpl('layout:min-width'), + getSchemaTpl('layout:flex-wrap', { + visibleOn: 'data.style && data.style.display === "flex"', + }), + + getSchemaTpl('layout:isFixedHeight'), + getSchemaTpl('layout:height'), + getSchemaTpl('layout:max-height'), getSchemaTpl('layout:min-height'), + getSchemaTpl('layout:overflow-y'), + + getSchemaTpl('layout:isFixedWidth'), + getSchemaTpl('layout:width'), + getSchemaTpl('layout:max-width'), + getSchemaTpl('layout:min-width'), + getSchemaTpl('layout:overflow-x'), + + !isFlexItem ? getSchemaTpl('layout:margin-center') : null, ] }, { diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 065294af6..b8f5e899d 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -5,6 +5,21 @@ import isString from 'lodash/isString'; /** * 布局相关配置项 + * 备注: 当前合计新增22个布局相关配置项，详细如下： + * 一、布局容器新增「定位模式」配置项，可选择：默认、相对、绝对、固定，其中绝对和固定可实现特殊布局（fixed：吸顶元素、吸底元素，不随指定页面内容滚动）； + * 1. 相对、绝对和固定布局 均提供 「inset 配置项」（top、right、bottom、left）； + * 2. 列级容器（布局容器中的直接子容器，比如 wrapper，container、嵌套布局容器）增加 「弹性模式」（固定宽度、弹性宽度）、「展示模式」（默认、弹性布局）、「默认宽度」配置项； + * 3. 开启 弹性模式 后，增加 「占比设置」配置项； + * 4. 展示模式 设置为 弹性布局（flex布局）后，新增 「排列方向」、「水平对齐方式」、「垂直对齐方式」、「自动换行」配置项； + * 5. 相对、绝对和固定布局 均提供「层级」配置项（z-index）； + * 备注：目前主要针对 布局容器（flex）、容器（container）和 包裹 （wrapper） 增加以上配置项。（布局容器 是 之前的 Flex 布局 组件 的升级版） + * + * 二、布局容器（flex）、容器（container）可通过以下新增配置项，实现滚动展示、居中展示等布局； + * 1. 新增是否「固定高度」，设置成固定高度，则增加 「高度」配置项、「y轴滚动」模式配置； + * 2. 新增是否「固定宽度」，设置成固定宽度，则增加「宽度」配置项、「x轴滚动」模式配置； + * 3. 非固定宽度，新增「最大宽度」、「最小宽度」配置项； + * 4. 非固定高度，新增「最大高度」、「最小高度」配置项； + * 5. 设置了 固定宽度 或者 最大宽度时，新增「居中显示」配置项； */ // 默认支持的单位 @@ -176,6 +191,75 @@ setSchemaTpl( } }); +// 展示模式 +setSchemaTpl( + 'layout:display', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'select', + label: config?.label || tipedLabel('展示模式', '默认为块级，可设置为弹性布局模式（flex布局容器）'), + name: config?.name || 'style.display', + value: config?.value || 'block', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + onChange: (value: string, oldValue: string, model: any, form: any) => { + if (value !== 'flex' && value !== 'inline-flex') { + form.setValueByName('style.flexDirection', undefined); + form.setValueByName('style.justifyContent', undefined); + form.setValueByName('style.alignItems', undefined); + } + }, + options: [ + { + label: '默认', + value: 'block' + }, + { + label: '弹性布局', + value: 'flex' + }, + { + label: '行内弹性布局', + value: 'inline-flex' + }, + { + label: '行内块级', + value: 'inline-block' + }, + { + label: '行内元素', + value: 'inline' + }, + ] + } + + if (config?.mode === 'vertical') { + // 上下展示，可避免 自定义渲染器 出现挤压 + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + // 默认左右展示 + return configSchema; + } +}); + // 主轴排列方向 setSchemaTpl( 'layout:justifyContent', @@ -286,7 +370,19 @@ setSchemaTpl( { label: '自动拉伸', value: 'stretch' - } + }, + { + label: '首尾留空', + value: 'space-around' + }, + { + label: '首尾对齐', + value: 'space-between' + }, + { + label: '元素等间距', + value: 'space-evenly' + }, ] } @@ -366,9 +462,9 @@ setSchemaTpl( } }); -// 是否固定高度: isFixedHeight 配置: +// 如何换行 setSchemaTpl( - 'layout:isFixedHeight', + 'layout:flex-wrap', (config?: { label?: string; name?: string; @@ -378,105 +474,27 @@ setSchemaTpl( pipeOut?: (value: any, data: any) => void; }) => { return { - type: 'switch', - label: config?.label || '固定高度', - name: config?.name || 'isFixedHeight', - value: config?.value || false, + type: 'select', + label: config?.label || '如何换行', + name: config?.name || 'style.flexWrap', + value: config?.value || 'nowrap', visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, - onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { - if (value) { - // 固定高度时，剔除最大高度、最小高度 - form.setValueByName('style.maxHeight', undefined); - form.setValueByName('style.minHeight', undefined); - } else { - // 非固定高度时，剔除高度数值 - form.setValueByName('style.height', undefined); - } - }, - }; -}); - -// 是否固定高度: isFixedWidth 配置: -setSchemaTpl( - 'layout:isFixedWidth', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'switch', - label: config?.label || '固定宽度', - name: config?.name || 'isFixedWidth', - value: config?.value || false, - visibleOn: config?.visibleOn, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { - if (value) { - // 固定宽度时，剔除最大宽度、最小宽度 - form.setValueByName('style.maxWidth', undefined); - form.setValueByName('style.minWidth', undefined); - } else { - // 非固定宽度时，剔除宽度数值 - form.setValueByName('style.width', undefined); - } - }, - }; -}); - -// 高度设置 -setSchemaTpl( - 'layout:height', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || '高度', - name: config?.name || 'style.height', - value: config?.value || '300px', - visibleOn: config?.visibleOn ?? 'data.isFixedHeight', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - }; -}); - -// 宽度设置 -setSchemaTpl( - 'layout:width', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || '宽度', - name: config?.name || 'style.width', - value: config?.value || '300px', - visibleOn: config?.visibleOn ?? 'data.isFixedWidth', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, + options: [ + { + label: '默认（不换行）', + value: 'nowrap' + }, + { + label: '自动换行', + value: 'wrap' + }, + { + label: '自动换行（颠倒）', + value: 'wrap-reverse' + }, + ] }; }); @@ -494,13 +512,15 @@ setSchemaTpl( label: config?.label || tipedLabel('弹性模式', '设置为弹性模式后，自动适配当前所在区域'), name: config?.name || 'style.flex', value: config?.value || '0 0 auto', - visibleOn: config?.visibleOn, trueValue: '1 1 auto', falseValue: '0 0 auto', + onText: "弹性宽度", + offText: "固定宽度", + inputClassName: 'inline-flex justify-between', + visibleOn: config?.visibleOn, onChange: (value: any, oldValue: boolean, model: any, form: any) => { if (!value || value === '0 0 auto') { - // 非弹性模式下，剔除默认宽度和占比设置 - form.setValueByName('style.flexBasis', undefined); + // 固定宽度模式下，剔除默认宽度和占比设置 form.setValueByName('style.flexGrow', undefined); } }, @@ -556,11 +576,10 @@ setSchemaTpl( }; }); -// 布局模式 +// 是否固定高度: isFixedHeight 配置: setSchemaTpl( - 'layout:display', + 'layout:isFixedHeight', (config?: { - mode?: string; label?: string; name?: string; value?: string, @@ -568,51 +587,52 @@ setSchemaTpl( pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { - const configSchema = { - type: 'select', - label: config?.label || tipedLabel('布局模式', '默认为块级，可设置为弹性布局模式（flex布局容器）'), - name: config?.name || 'style.display', - value: config?.value || 'block', + return { + type: 'switch', + label: config?.label || '固定高度', + name: config?.name || 'isFixedHeight', + value: config?.value || false, visibleOn: config?.visibleOn, + inputClassName: 'inline-flex justify-between', pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, - onChange: (value: string, oldValue: string, model: any, form: any) => { - if (value !== 'flex' && value !== 'inline-flex') { - form.setValueByName('style.flexDirection', undefined); - form.setValueByName('style.justifyContent', undefined); - form.setValueByName('style.alignItems', undefined); + onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { + if (value) { + // 固定高度时，剔除最大高度、最小高度 + form.setValueByName('style.maxHeight', undefined); + form.setValueByName('style.minHeight', undefined); + } else { + // 非固定高度时，剔除高度数值 + form.setValueByName('style.height', undefined); } }, - options: [ - { - label: '默认', - value: 'block' - }, - { - label: '弹性布局', - value: 'flex' - }, - ] - } - - if (config?.mode === 'vertical') { - // 上下展示，可避免 自定义渲染器 出现挤压 - return { - type: 'group', - mode: 'vertical', - visibleOn: config?.visibleOn, - body: [ - { - ...configSchema - } - ] - }; - } else { - // 默认左右展示 - return configSchema; - } + }; }); +// 宽度设置 +setSchemaTpl( + 'layout:width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || '宽度', + name: config?.name || 'style.width', + value: config?.value || '300px', + visibleOn: config?.visibleOn ?? 'data.isFixedWidth', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); // 最大宽度设置 setSchemaTpl( @@ -639,31 +659,6 @@ setSchemaTpl( }; }); -// 最大高度设置 -setSchemaTpl( - 'layout:max-height', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || tipedLabel('最大高度', '最大高度即当前元素最多的展示高度'), - name: config?.name || 'style.maxHeight', - value: config?.value, - visibleOn: config?.visibleOn ?? '!data.isFixedHeight', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - }; -}); - // x轴（水平轴）滚动模式 setSchemaTpl( 'layout:overflow-x', @@ -704,6 +699,139 @@ setSchemaTpl( }; }); +// 最小宽度设置 +setSchemaTpl( + 'layout:min-width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || tipedLabel('最小宽度', '最小宽度即当前元素最小的水平展示区域'), + name: config?.name || 'style.minWidth', + value: config?.value, + visibleOn: config?.visibleOn ?? '!data.isFixedWidth', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 是否固定高度: isFixedWidth 配置: +setSchemaTpl( + 'layout:isFixedWidth', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'switch', + label: config?.label || '固定宽度', + name: config?.name || 'isFixedWidth', + value: config?.value || false, + visibleOn: config?.visibleOn, + inputClassName: 'inline-flex justify-between', + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { + if (value) { + // 固定宽度时，剔除最大宽度、最小宽度 + form.setValueByName('style.maxWidth', undefined); + form.setValueByName('style.minWidth', undefined); + } else { + // 非固定宽度时，剔除宽度数值 + form.setValueByName('style.width', undefined); + } + }, + }; +}); + +// 高度设置 +setSchemaTpl( + 'layout:height', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || '高度', + name: config?.name || 'style.height', + value: config?.value || '300px', + visibleOn: config?.visibleOn ?? 'data.isFixedHeight', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 最大高度设置 +setSchemaTpl( + 'layout:max-height', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || tipedLabel('最大高度', '最大高度即当前元素最多的展示高度'), + name: config?.name || 'style.maxHeight', + value: config?.value, + visibleOn: config?.visibleOn ?? '!data.isFixedHeight', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 最小高度设置 +setSchemaTpl( + 'layout:min-height', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || tipedLabel('最小高度', '最小宽度即当前元素最小的垂直展示区域'), + name: config?.name || 'style.minHeight', + value: config?.value, + visibleOn: config?.visibleOn ?? '!data.isFixedHeight', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + // y轴（交叉轴）滚动模式 setSchemaTpl( 'layout:overflow-y', @@ -760,6 +888,7 @@ setSchemaTpl( label: config?.label || tipedLabel('居中显示', '通过将设置 margin: 0 auto 来达到居中显示'), name: config?.name || 'style.margin', value: config?.value || '0', + inputClassName: 'inline-flex justify-between', visibleOn: config?.visibleOn ?? 'data.isFixedWidth || data.style && data.style.maxWidth', pipeIn: (value: any) => { let curValue = value || '0'; @@ -782,54 +911,4 @@ setSchemaTpl( return value ? '0 auto' : '0'; } }; -}); - -// 最小宽度设置 -setSchemaTpl( - 'layout:min-width', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || tipedLabel('最小宽度', '最小宽度即当前元素最小的水平展示区域'), - name: config?.name || 'style.minWidth', - value: config?.value, - visibleOn: config?.visibleOn ?? '!data.isFixedWidth', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - }; -}); - -// 最小高度设置 -setSchemaTpl( - 'layout:min-height', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || tipedLabel('最小高度', '最小宽度即当前元素最小的垂直展示区域'), - name: config?.name || 'style.minHeight', - value: config?.value, - visibleOn: config?.visibleOn ?? '!data.isFixedHeight', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - }; }); \ No newline at end of file From 8177458d9f28bc5e9b3b30ca6b94cbd090081667 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Sun, 3 Jul 2022 23:50:22 +0800 Subject: [PATCH 15/40] =?UTF-8?q?feat(layout):=20=E7=89=B9=E6=AE=8A?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=85=83=E7=B4=A0=E5=A2=9E=E5=8A=A0=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E4=BD=8D=E7=BD=AE=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I8206d95a1fd5c5c7cb871ff44d64833d28d6eb22 --- packages/amis-editor/webpack.config.js | 101 +++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 packages/amis-editor/webpack.config.js diff --git a/packages/amis-editor/webpack.config.js b/packages/amis-editor/webpack.config.js new file mode 100644 index 000000000..d8444ffe6 --- /dev/null +++ b/packages/amis-editor/webpack.config.js @@ -0,0 +1,101 @@ +/** + * @file webpack 配置文件。 + */ +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const nodeExternals = require('webpack-node-externals'); +const path = require('path'); +// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; + +module.exports = { + mode: 'production', // development production + entry: { + index: ['./src/index.tsx'], + }, + output: { + path: path.join(__dirname, 'lib'), + filename: '[name].min.js', + libraryTarget: 'commonjs' + }, + resolve: { + extensions: ['.ts', '.tsx', '.js'] + }, + module: { + rules: [ + { + test: /\.tsx?$/, + loader: 'ts-loader', + options: { + compilerOptions: { + declaration: true, + outDir: './lib' + } + } + }, + { + test: /\.scss$/i, + use: [ + MiniCssExtractPlugin.loader, + + // Creates `style` nodes from JS strings + // 'style-loader', + // Translates CSS into CommonJS + 'css-loader', + // Compiles Sass to CSS + { + loader: 'sass-loader', + options: { + implementation: require('sass'), // `dart-sass` 是首选 + // webpackImporter: true, // 开启 / 关闭默认的 Webpack importer。默认为true，所以不需要额外配置这个 + sassOptions: { + // 正常情况下不需要这个配置项，但有些情况下需要（比如导入的sass文件包含 media queries等）。 + includePaths: ['node_modules', '../../node_modules'], + }, + }, + } + ] + }, + { + test: /\.css$/i, + use: [ + MiniCssExtractPlugin.loader, + // Creates `style` nodes from JS strings + // 'style-loader', + // Translates CSS into CommonJS + 'css-loader' + ] + }, + { + test: /\.svg$/, + issuer: /\.[jt]sx?$/, + use: ['@svgr/webpack'] + } + ] + }, + plugins: [ + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: '[name].css', + chunkFilename: '[id].css' + }), + // new BundleAnalyzerPlugin(), + { + apply(compiler) { + compiler.hooks.shouldEmit.tap( + 'Remove styles from output', + compilation => { + delete compilation.assets['style.min.js']; // Remove asset. Name of file depends of your entries and + return true; + } + ); + } + } + ], + externals: [ + nodeExternals({ + importType: 'commonjs', + allowlist: [/^amis\/schemas/], + additionalModuleDirs: [path.resolve(__dirname, '../../node_modules')] + }) + ] +}; From e7dc47fe17526bfdefbc4a032e5ce6efb90c8e79 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 4 Jul 2022 16:15:42 +0800 Subject: [PATCH 16/40] =?UTF-8?q?fix:=20=E5=89=94=E9=99=A4icon=E4=B8=AD?= =?UTF-8?q?=E5=A4=9A=E4=BD=99=E7=9A=84title?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I5ad785e01a64de0305814ed918c7580c8276dbb2 --- packages/amis-editor/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index deb42c565..034f024bf 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -7,7 +7,8 @@ "types": "lib/index.d.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build": "npm run clean-dist && NODE_ENV=production rollup -c ", + "build-rollup": "npm run clean-dist && NODE_ENV=production rollup -c ", + "build": "npm run clean-dist && webpack", "clean-dist": "rimraf lib/* esm/*" }, "keywords": [ From 542174d458368f8732cc3a9d9e8a88c1bce43bde Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 4 Jul 2022 17:45:40 +0800 Subject: [PATCH 17/40] =?UTF-8?q?build:=20=E4=BF=AE=E5=A4=8D=E6=9E=84?= =?UTF-8?q?=E5=BB=BA=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I6ba67dd3250afb19f3443eea0d047a9ba66bc20e --- packages/amis-editor/package.json | 4 ++-- packages/amis-editor/rollup.config.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 034f024bf..f67145e22 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -7,8 +7,8 @@ "types": "lib/index.d.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build-rollup": "npm run clean-dist && NODE_ENV=production rollup -c ", - "build": "npm run clean-dist && webpack", + "build": "npm run clean-dist && NODE_ENV=production rollup -c ", + "build-webpack": "npm run clean-dist && webpack", "clean-dist": "rimraf lib/* esm/*" }, "keywords": [ diff --git a/packages/amis-editor/rollup.config.js b/packages/amis-editor/rollup.config.js index 7407c2ded..c1a4f0f75 100644 --- a/packages/amis-editor/rollup.config.js +++ b/packages/amis-editor/rollup.config.js @@ -77,6 +77,7 @@ function transpileDynamicImportForCJS(options) { } function getPlugins(format = 'esm') { + const typeScriptOptions = { typescript: require('typescript'), sourceMap: false, @@ -141,4 +142,3 @@ function onRollupError(callback = () => {}) { } }; } - From 3761e9cea4cdec3b47aa0f46c33fad351b285b8f Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 5 Jul 2022 14:34:27 +0800 Subject: [PATCH 18/40] =?UTF-8?q?feat(layout):=20=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E6=96=B0=E5=A2=9E=E5=89=8D=E5=90=8E=E6=8F=92?= =?UTF-8?q?=E5=85=A5=E5=AE=B9=E5=99=A8=E5=85=83=E7=B4=A0icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I6ef8512f2a809088321a31799e31672a496f34de --- packages/amis-editor/src/plugin/Flex.tsx | 15 +- .../src/plugin/Layout/FlexPluginBase.tsx | 128 +++++++++++++++--- 2 files changed, 112 insertions(+), 31 deletions(-) diff --git a/packages/amis-editor/src/plugin/Flex.tsx b/packages/amis-editor/src/plugin/Flex.tsx index a1b15471c..76a79e201 100644 --- a/packages/amis-editor/src/plugin/Flex.tsx +++ b/packages/amis-editor/src/plugin/Flex.tsx @@ -2,24 +2,13 @@ * @file Flex 布局 */ import {registerEditorPlugin} from 'amis-editor-core'; -import { - BasePlugin, - PluginEvent -} from 'amis-editor-core'; -import {getSchemaTpl} from 'amis-editor-core'; -import type { - BaseEventContext, - EditorNodeType, - RegionConfig, - RendererJSONSchemaResolveEventContext -} from 'amis-editor-core'; -import {tipedLabel} from '../component/BaseControl'; import {FlexPluginBase} from './Layout/FlexPluginBase'; export class FlexPlugin extends FlexPluginBase { name = '布局容器'; pluginIcon = 'flex-container-plugin'; - description = '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; + description = + '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; } registerEditorPlugin(FlexPlugin); diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index abf23945c..a1c60a549 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -7,10 +7,87 @@ import type { BaseEventContext, EditorNodeType, RegionConfig, - RendererJSONSchemaResolveEventContext + RendererJSONSchemaResolveEventContext, + BasicToolbarItem } from 'amis-editor-core'; import {tipedLabel} from '../../component/BaseControl'; +// 默认的布局容器Schema +const defaultFlexContainerSchema = { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一列', + inline: false + } + ], + style: { + position: 'static', + display: 'flex', + flex: '1 1 auto', + flexGrow: 1, + flexBasis: 'auto', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch', + flexWrap: 'nowrap' + }, + isFixedHeight: false, + isFixedWidth: false + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二列', + inline: false + } + ], + style: { + position: 'static', + display: 'flex', + flex: '1 1 auto', + flexGrow: 1, + flexBasis: 'auto', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch', + flexWrap: 'nowrap' + }, + isFixedHeight: false, + isFixedWidth: false + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第三列', + inline: false + } + ], + style: { + position: 'static', + display: 'flex', + flex: '1 1 auto', + flexGrow: 1, + flexBasis: 'auto', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch', + flexWrap: 'nowrap' + }, + isFixedHeight: false, + isFixedWidth: false + } + ] +}; + export class FlexPluginBase extends BasePlugin { rendererName = 'flex'; $schema = '/schemas/FlexSchema.json'; @@ -24,23 +101,7 @@ export class FlexPluginBase extends BasePlugin { '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; docLink = '/amis/zh-CN/components/flex'; tags = ['容器']; - scaffold = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: '第一列' - }, - { - type: 'wrapper', - body: '第二列' - }, - { - type: 'wrapper', - body: '第三列' - } - ] - }; + scaffold: any = defaultFlexContainerSchema; previewSchema = { ...this.scaffold }; @@ -167,6 +228,37 @@ export class FlexPluginBase extends BasePlugin { } ]; + buildEditorToolbar( + {id, info, schema}: BaseEventContext, + toolbars: Array + ) { + const store = this.manager.store; + const parent = store.getSchemaParentById(id); + const draggableContainer = this.manager.draggableContainer(id); + + if (parent && (info.renderer.name === 'flex' || info.renderer.name === 'container') && !draggableContainer) { + + toolbars.push( + { + iconSvg: 'add-btn', + tooltip: '向前插入布局容器', + level: 'special', + placement: 'top', + className: 'ae-InsertBefore is-vertical', + onClick: () => this.manager.appendSiblingSchema(defaultFlexContainerSchema, true, true) + }, + { + iconSvg: 'add-btn', + tooltip: '向后插入布局容器', + level: 'special', + placement: 'bottom', + className: 'ae-InsertAfter is-vertical', + onClick: () => this.manager.appendSiblingSchema(defaultFlexContainerSchema, false, true) + } + ); + } + } + afterResolveJsonSchema( event: PluginEvent ) { From 2e1981f5d42ce156e6ded93e5bc7d3ab9287c4a0 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 5 Jul 2022 16:06:21 +0800 Subject: [PATCH 19/40] =?UTF-8?q?feat(layout):=20=E5=88=97=E7=BA=A7?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=A2=9E=E5=8A=A0=E5=B7=A6=E5=8F=B3=E6=8F=92?= =?UTF-8?q?=E5=85=A5=E5=8A=9F=E8=83=BDicon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I8f96f44685ebc750e92cdf1c5428b9fcad8c7397 --- .../src/plugin/Layout/FlexPluginBase.tsx | 124 ++++++++---------- 1 file changed, 55 insertions(+), 69 deletions(-) diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index a1c60a549..8dcfffe0e 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -12,79 +12,40 @@ import type { } from 'amis-editor-core'; import {tipedLabel} from '../../component/BaseControl'; + +// 默认的列容器Schema +const defaultFlexColumnSchema = (title: string) => { + return { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: title || '新的一列', + inline: false + } + ], + style: { + position: 'static', + display: 'flex', + flex: '1 1 auto', + flexGrow: 1, + flexBasis: 'auto', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch', + flexWrap: 'nowrap' + }, + isFixedHeight: false, + isFixedWidth: false + }; +}; // 默认的布局容器Schema const defaultFlexContainerSchema = { type: 'flex', items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } - ], - style: { - position: 'static', - display: 'flex', - flex: '1 1 auto', - flexGrow: 1, - flexBasis: 'auto', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'stretch', - flexWrap: 'nowrap' - }, - isFixedHeight: false, - isFixedWidth: false - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - position: 'static', - display: 'flex', - flex: '1 1 auto', - flexGrow: 1, - flexBasis: 'auto', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'stretch', - flexWrap: 'nowrap' - }, - isFixedHeight: false, - isFixedWidth: false - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第三列', - inline: false - } - ], - style: { - position: 'static', - display: 'flex', - flex: '1 1 auto', - flexGrow: 1, - flexBasis: 'auto', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'stretch', - flexWrap: 'nowrap' - }, - isFixedHeight: false, - isFixedWidth: false - } + defaultFlexColumnSchema('第一列'), + defaultFlexColumnSchema('第二列'), + defaultFlexColumnSchema('第三列') ] }; @@ -235,6 +196,7 @@ export class FlexPluginBase extends BasePlugin { const store = this.manager.store; const parent = store.getSchemaParentById(id); const draggableContainer = this.manager.draggableContainer(id); + const isFlexItem = this.manager?.isFlexItem(id); if (parent && (info.renderer.name === 'flex' || info.renderer.name === 'container') && !draggableContainer) { @@ -257,6 +219,30 @@ export class FlexPluginBase extends BasePlugin { } ); } + + if (isFlexItem) { + // 布局容器的列级元素 增加左右插入icon + const newColumnSchema = defaultFlexColumnSchema('新的一列'); + toolbars.push( + { + iconSvg: 'add-btn', + tooltip: '左侧（上侧）插入列级容器', + level: 'special', + placement: 'bottom', + className: 'ae-InsertBefore', + onClick: () => this.manager.appendSiblingSchema(newColumnSchema, true, true) + }, + { + iconSvg: 'add-btn', + tooltip: '右侧（下侧）插入列级容器', + level: 'special', + placement: 'bottom', + className: 'ae-InsertAfter', + onClick: () => this.manager.appendSiblingSchema(newColumnSchema, false, true) + } + ); + } + } afterResolveJsonSchema( From 47b2c18efce6ae6335e78a442e54b00a08257040 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 5 Jul 2022 16:50:45 +0800 Subject: [PATCH 20/40] =?UTF-8?q?feat(layout):=20=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=8F=B3=E4=B8=8A=E8=A7=92=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=8F=92=E5=85=A5=E5=88=97=E7=BA=A7=E5=85=83=E7=B4=A0=E5=8A=9F?= =?UTF-8?q?=E8=83=BDicon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Idbee73bc748e5d34cb876f96e39567ef0b33c4d3 --- .../amis-editor/src/plugin/Layout/FlexPluginBase.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 8dcfffe0e..322f2d8eb 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -197,6 +197,7 @@ export class FlexPluginBase extends BasePlugin { const parent = store.getSchemaParentById(id); const draggableContainer = this.manager.draggableContainer(id); const isFlexItem = this.manager?.isFlexItem(id); + const newColumnSchema = defaultFlexColumnSchema('新的一列'); if (parent && (info.renderer.name === 'flex' || info.renderer.name === 'container') && !draggableContainer) { @@ -216,13 +217,20 @@ export class FlexPluginBase extends BasePlugin { placement: 'bottom', className: 'ae-InsertAfter is-vertical', onClick: () => this.manager.appendSiblingSchema(defaultFlexContainerSchema, false, true) + }, + { + iconSvg: 'add-btn', + tooltip: '新增列级元素', + level: 'special', + placement: 'bottom', + className: 'ae-AppendChild', + onClick: () => this.manager.addElem(newColumnSchema) } ); } if (isFlexItem) { // 布局容器的列级元素 增加左右插入icon - const newColumnSchema = defaultFlexColumnSchema('新的一列'); toolbars.push( { iconSvg: 'add-btn', From ebd6b922d66f50392998e94a49fa42f9f1e6c8ff Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Thu, 7 Jul 2022 14:32:05 +0800 Subject: [PATCH 21/40] =?UTF-8?q?fix(layout):=20=E7=89=B9=E6=AE=8A?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=AE=B9=E5=99=A8=E5=B7=A6=E5=8F=B3=E4=B8=8D?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=8F=92=E5=85=A5icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Iaa43109fe7afe7bf67a7022b5b183eddbdc27212 --- packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 322f2d8eb..907a51460 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -229,7 +229,7 @@ export class FlexPluginBase extends BasePlugin { ); } - if (isFlexItem) { + if (isFlexItem && !draggableContainer) { // 布局容器的列级元素 增加左右插入icon toolbars.push( { From 9017429696bded2b724691e409ddc78aaf39cab1 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Thu, 7 Jul 2022 14:52:44 +0800 Subject: [PATCH 22/40] =?UTF-8?q?style:=20=E4=BB=A3=E7=A0=81=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I8d3ed33ba7fd9edad1e41c0d65b7ed83d2658754 --- .../src/plugin/Layout/FlexPluginBase.tsx | 60 +++-- .../src/plugin/Layout/Layout1_2_v4.tsx | 232 +++++++++--------- .../src/plugin/Layout/Layout_fixed_bottom.tsx | 24 +- 3 files changed, 169 insertions(+), 147 deletions(-) diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 907a51460..208066548 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -12,7 +12,6 @@ import type { } from 'amis-editor-core'; import {tipedLabel} from '../../component/BaseControl'; - // 默认的列容器Schema const defaultFlexColumnSchema = (title: string) => { return { @@ -88,15 +87,24 @@ export class FlexPluginBase extends BasePlugin { { title: '布局', body: [ - isFlexItem ? getSchemaTpl('layout:flex', { - visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', - }) : null, - isFlexItem ? getSchemaTpl('layout:flex-grow', { - visibleOn: 'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")', - }) : null, - isFlexItem ? getSchemaTpl('layout:flex-basis', { - visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', - }) : null, + isFlexItem + ? getSchemaTpl('layout:flex', { + visibleOn: + 'data.style && (data.style.position === "static" || data.style.position === "relative")' + }) + : null, + isFlexItem + ? getSchemaTpl('layout:flex-grow', { + visibleOn: + 'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")' + }) + : null, + isFlexItem + ? getSchemaTpl('layout:flex-basis', { + visibleOn: + 'data.style && (data.style.position === "static" || data.style.position === "relative")' + }) + : null, getSchemaTpl('layout:position'), getSchemaTpl('layout:inset', { mode: 'vertical' @@ -133,7 +141,7 @@ export class FlexPluginBase extends BasePlugin { getSchemaTpl('layout:min-width'), getSchemaTpl('layout:overflow-x'), - !isFlexItem ? getSchemaTpl('layout:margin-center') : null, + !isFlexItem ? getSchemaTpl('layout:margin-center') : null ] }, { @@ -185,7 +193,7 @@ export class FlexPluginBase extends BasePlugin { regions: Array = [ { key: 'items', - label: '子节点集合', + label: '子节点集合' } ]; @@ -199,8 +207,11 @@ export class FlexPluginBase extends BasePlugin { const isFlexItem = this.manager?.isFlexItem(id); const newColumnSchema = defaultFlexColumnSchema('新的一列'); - if (parent && (info.renderer.name === 'flex' || info.renderer.name === 'container') && !draggableContainer) { - + if ( + parent && + (info.renderer.name === 'flex' || info.renderer.name === 'container') && + !draggableContainer + ) { toolbars.push( { iconSvg: 'add-btn', @@ -208,7 +219,12 @@ export class FlexPluginBase extends BasePlugin { level: 'special', placement: 'top', className: 'ae-InsertBefore is-vertical', - onClick: () => this.manager.appendSiblingSchema(defaultFlexContainerSchema, true, true) + onClick: () => + this.manager.appendSiblingSchema( + defaultFlexContainerSchema, + true, + true + ) }, { iconSvg: 'add-btn', @@ -216,7 +232,12 @@ export class FlexPluginBase extends BasePlugin { level: 'special', placement: 'bottom', className: 'ae-InsertAfter is-vertical', - onClick: () => this.manager.appendSiblingSchema(defaultFlexContainerSchema, false, true) + onClick: () => + this.manager.appendSiblingSchema( + defaultFlexContainerSchema, + false, + true + ) }, { iconSvg: 'add-btn', @@ -238,7 +259,8 @@ export class FlexPluginBase extends BasePlugin { level: 'special', placement: 'bottom', className: 'ae-InsertBefore', - onClick: () => this.manager.appendSiblingSchema(newColumnSchema, true, true) + onClick: () => + this.manager.appendSiblingSchema(newColumnSchema, true, true) }, { iconSvg: 'add-btn', @@ -246,11 +268,11 @@ export class FlexPluginBase extends BasePlugin { level: 'special', placement: 'bottom', className: 'ae-InsertAfter', - onClick: () => this.manager.appendSiblingSchema(newColumnSchema, false, true) + onClick: () => + this.manager.appendSiblingSchema(newColumnSchema, false, true) } ); } - } afterResolveJsonSchema( diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx index b77b6cc51..f3d93bcb0 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx @@ -9,125 +9,125 @@ export class Layout1_2_v4 extends FlexPluginBase { tags = ['常见布局']; order = 307; scaffold: any = { - type: "flex", + type: 'flex', items: [ - { - type: "wrapper", - body: [ - { - type: "tpl", - tpl: "经典布局：第一行", - inline: false, - } - ], - style: { - flex: "0 0 auto", - backgroundColor: "rgba(74, 144, 226, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" - }, - }, - { - type: "flex", - items: [ - { - type: "wrapper", - body: [ - { - type: "tpl", - tpl: "第一列", - inline: false, - } - ], - style: { - flex: "0 0 auto", - flexBasis: "250px", - backgroundColor: "rgba(181, 242, 167, 1)", - display: "flex", - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "stretch" - }, - }, - { - type: "flex", - items: [ - { - type: "wrapper", - body: [ - { - type: "tpl", - tpl: "第一行", - inline: false, - } - ], - style: { - flex: "1 1 auto", - flexBasis: "auto", - flexGrow: 1, - display: "block", - backgroundColor: "rgba(71, 92, 233, 0.68)" - }, - }, - { - type: "wrapper", - body: [ - { - type: "tpl", - tpl: "第二行", - inline: false, - } - ], - style: { - flex: "1 1 auto", - flexBasis: "auto", - flexGrow: 1, - display: "block", - backgroundColor: "rgba(245, 166, 35, 0.48)" - }, - } - ], - style: { - position: "static", - overflowX: "auto", - overflowY: "auto", - margin: "0", - flex: "1 1 auto", - flexGrow: 1, - flexBasis: "auto" - }, - alignItems: "stretch", - direction: "column", - justify: "center", - isFixedHeight: false, - isFixedWidth: false - } - ], - style: { - flex: "1 1 auto", - overflowX: "auto", - margin: "0", - maxWidth: "auto", - overflowY: "auto", - position: "static", - minWidth: "auto", - width: "auto", - maxHeight: "auto", - minHeight: "300px" - }, - direction: "row", - justify: "flex-start", - alignItems: "stretch", - isFixedHeight: false, - isFixedWidth: false, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '经典布局：第一行', + inline: false + } + ], + style: { + flex: '0 0 auto', + backgroundColor: 'rgba(74, 144, 226, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' } + }, + { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一列', + inline: false + } + ], + style: { + flex: '0 0 auto', + flexBasis: '250px', + backgroundColor: 'rgba(181, 242, 167, 1)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'flex', + items: [ + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第一行', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(71, 92, 233, 0.68)' + } + }, + { + type: 'wrapper', + body: [ + { + type: 'tpl', + tpl: '第二行', + inline: false + } + ], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block', + backgroundColor: 'rgba(245, 166, 35, 0.48)' + } + } + ], + style: { + position: 'static', + overflowX: 'auto', + overflowY: 'auto', + margin: '0', + flex: '1 1 auto', + flexGrow: 1, + flexBasis: 'auto' + }, + alignItems: 'stretch', + direction: 'column', + justify: 'center', + isFixedHeight: false, + isFixedWidth: false + } + ], + style: { + flex: '1 1 auto', + overflowX: 'auto', + margin: '0', + maxWidth: 'auto', + overflowY: 'auto', + position: 'static', + minWidth: 'auto', + width: 'auto', + maxHeight: 'auto', + minHeight: '300px' + }, + direction: 'row', + justify: 'flex-start', + alignItems: 'stretch', + isFixedHeight: false, + isFixedWidth: false + } ], - direction: "column", - justify: "center", - alignItems: "stretch", -}; + direction: 'column', + justify: 'center', + alignItems: 'stretch' + }; previewSchema = { ...this.scaffold }; diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx index ee561d2c4..268fcf792 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx @@ -24,10 +24,10 @@ export class Layout_fixed_bottom extends FlexPluginBase { flex: '1 1 auto', flexBasis: 'auto', flexGrow: 1, - display: "flex", - flexDirection: "row", - justifyContent: "center", - alignItems: "stretch", + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch', backgroundColor: 'rgba(181, 242, 167, 1)' } }, @@ -44,10 +44,10 @@ export class Layout_fixed_bottom extends FlexPluginBase { flex: '1 1 auto', flexBasis: 'auto', flexGrow: 1, - display: "flex", - flexDirection: "row", - justifyContent: "center", - alignItems: "stretch", + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch', backgroundColor: 'rgba(245, 166, 35, 0.48)' } }, @@ -64,10 +64,10 @@ export class Layout_fixed_bottom extends FlexPluginBase { flex: '1 1 auto', flexBasis: 'auto', flexGrow: 1, - display: "flex", - flexDirection: "row", - justifyContent: "center", - alignItems: "stretch", + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch', backgroundColor: 'rgba(242, 54, 54, 0.51)' } } From d297a66f1c0ced0c56c1e1c76a3b991b1f631b8a Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Sun, 17 Jul 2022 23:16:56 +0800 Subject: [PATCH 23/40] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3ts=E6=8A=A5?= =?UTF-8?q?=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I70d74f7390ba5fd50373af5ab1aeb544666ae877 --- packages/amis-editor/src/renderer/event-control/index.tsx | 2 +- packages/amis-editor/src/validator.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx index 5abbc7e90..919759496 100644 --- a/packages/amis-editor/src/renderer/event-control/index.tsx +++ b/packages/amis-editor/src/renderer/event-control/index.tsx @@ -47,7 +47,7 @@ interface EventControlProps extends FormControlProps { ) => void; addBroadcast?: (event: RendererPluginEvent) => void; removeBroadcast?: (eventName: string) => void; - getComponents: (action: RendererPluginAction) => ComponentInfo[]; // 当前页面组件树 + getComponents: (action: any) => ComponentInfo[]; // 当前页面组件树 getContextSchemas?: (id?: string, withoutSuper?: boolean) => DataSchema; // 获取上下文 actionConfigInitFormatter?: (actionConfig: ActionConfig) => ActionConfig; // 动作配置初始化时格式化 actionConfigSubmitFormatter?: (actionConfig: ActionConfig) => ActionConfig; // 动作配置提交时格式化 diff --git a/packages/amis-editor/src/validator.tsx b/packages/amis-editor/src/validator.tsx index 08767838c..0a15d974b 100644 --- a/packages/amis-editor/src/validator.tsx +++ b/packages/amis-editor/src/validator.tsx @@ -49,7 +49,7 @@ export interface Validator { /** * 快速编辑的表单 */ - schema?: SchemaObject[]; + schema?: any[]; /** * 输入类型，true则表示是默认 From f8b652e1925e2fcf30e94dfb82d18b2b97b7d590 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Tue, 1 Nov 2022 11:36:54 +0800 Subject: [PATCH 24/40] =?UTF-8?q?fix(amis-saas-4371):=20=E5=B8=B8=E8=A7=81?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=BB=84=E4=BB=B6=E6=94=B9=E4=B8=BA=E9=9D=9E?= =?UTF-8?q?=E5=86=85=E7=BD=AE=EF=BC=8C=E6=94=BE=E7=A4=BA=E4=BE=8B=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Ie2791f4f3a942ac40b2321da8f2661782c04f45e --- packages/amis-editor/package.json | 8 +- packages/amis-editor/src/index.tsx | 19 -- packages/amis-editor/src/locale/en-US.ts | 74 ++++++- packages/amis-editor/src/locale/zh-CN.ts | 63 +++++- packages/amis-editor/src/plugin/Container.tsx | 4 +- .../src/plugin/Layout/FlexPluginBase.tsx | 3 +- .../src/plugin/Layout/Layout1_1.tsx | 58 ------ .../src/plugin/Layout/Layout1_1_1.tsx | 75 ------- .../src/plugin/Layout/Layout1_1_1_v2.tsx | 87 -------- .../src/plugin/Layout/Layout1_1_v2.tsx | 67 ------ .../src/plugin/Layout/Layout1_2.tsx | 58 ------ .../src/plugin/Layout/Layout1_2_3.tsx | 75 ------- .../src/plugin/Layout/Layout1_2_v2.tsx | 95 --------- .../src/plugin/Layout/Layout1_2_v3.tsx | 97 --------- .../src/plugin/Layout/Layout1_2_v4.tsx | 136 ------------ .../src/plugin/Layout/Layout1_3.tsx | 58 ------ .../src/plugin/Layout/Layout2_1_v2.tsx | 98 --------- .../src/plugin/Layout/Layout2_1_v3.tsx | 96 --------- .../src/plugin/Layout/Layout_fixed.tsx | 45 ---- .../src/plugin/Layout/Layout_fixed_bottom.tsx | 99 --------- .../src/plugin/Layout/Layout_fixed_top.tsx | 90 -------- .../src/plugin/Layout/Layout_scroll_x.tsx | 193 ------------------ .../src/plugin/Layout/Layout_scroll_y.tsx | 169 --------------- packages/amis-editor/src/tpl/layout.tsx | 3 +- 24 files changed, 142 insertions(+), 1628 deletions(-) delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_1.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_3.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx delete mode 100644 packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index e9f110974..40d94d46b 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -61,10 +61,10 @@ "@types/sortablejs": "^1.10.7", "@types/tinycolor2": "^1.4.3", "ajv": "^8.8.2", - "amis": "2.3.2-beta.1", - "amis-core": "2.3.2-beta.1", - "amis-formula": "2.3.2-beta.1", - "amis-ui": "2.3.2-beta.1", + "amis": "2.4.0", + "amis-core": "2.4.0", + "amis-formula": "2.4.0", + "amis-ui": "2.4.0", "axios": "0.21.1", "concurrently": "^6.2.0", "css-loader": "^6.2.0", diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index 6898914d4..d12fa0b44 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -139,25 +139,6 @@ import './plugin/WebComponent'; import './plugin/CRUD2'; import './plugin/ColumnToggler'; -// 常见布局 -import './plugin/Layout/Layout1_1'; -import './plugin/Layout/Layout1_2'; -import './plugin/Layout/Layout1_3'; -import './plugin/Layout/Layout1_1_v2'; -import './plugin/Layout/Layout1_1_1'; -import './plugin/Layout/Layout1_2_3'; -import './plugin/Layout/Layout1_1_1_v2'; -import './plugin/Layout/Layout1_2_v2'; -import './plugin/Layout/Layout2_1_v2'; -import './plugin/Layout/Layout1_2_v3'; -import './plugin/Layout/Layout2_1_v3'; -import './plugin/Layout/Layout1_2_v4'; -import './plugin/Layout/Layout_fixed_top'; -import './plugin/Layout/Layout_fixed_bottom'; -import './plugin/Layout/Layout_fixed'; -import './plugin/Layout/Layout_scroll_x'; -import './plugin/Layout/Layout_scroll_y'; - import {GridPlugin} from './plugin/Grid'; import './renderer/OptionControl'; diff --git a/packages/amis-editor/src/locale/en-US.ts b/packages/amis-editor/src/locale/en-US.ts index 7142c5089..e07b9d92f 100644 --- a/packages/amis-editor/src/locale/en-US.ts +++ b/packages/amis-editor/src/locale/en-US.ts @@ -3331,5 +3331,77 @@ extendLocale('en-US', { '951f802ebd0c0d795fbae6767a5ee9b3': 'Initialize interface request succeeded', 'da0126992b4937a5fd847ef5366b02e6': 'Data returned by initialization interface request successfully', - '70b8342d743374233bfee0f56c7f0fc7': 'Node Sample Data' + '70b8342d743374233bfee0f56c7f0fc7': 'Node Sample Data', + '38f85482d657cd4db1280c5efa1950fd': '{{@1}} Alignment', + '0a0574baedb8eb2abf7daf25159d8bb1': + 'Set the alignment of sub elements on the spindle', + '5ccc4c05cd41195f202f550a4c307a64': + 'Set the alignment of child elements on the cross axis', + 'b1b98c19058af70d8bd499e1899e93bc': 'Layout Container', + '03097563d201ad3a29c79165226764e5': + 'The layout container is a layout effect based on CSS Flex. It is more controllable than Grid and HBox for the location of child nodes, and easier to use than CSS classes', + 'e151c86d57096bb74dcd390ade29362b': 'New column', + 'e5f9b3a3655b8daddcee8b97b735887f': 'Insert Layout Container Forward', + '577b33bf128fba16ed8e9bf7c395f455': 'Insert Layout Container Backward', + '31f84d1bc6175fd0828a81b5bfd98736': 'Add column level element', + 'cbc1d00cc640b67ee34a29a694ef162a': + 'Left (upper) insert column level container', + 'bb3cc092e17ff83e943554bde3d5771b': + 'Insert column level container on the right (lower) side', + 'b19b454fe603e03e98ad9772615c7c32': 'Positioning mode', + '8444f01399c0003fbb68eeff1310566c': + 'Specifies the positioning type of the current container element', + '5ddea41072a27a74a1715549dfb79bc2': 'relative', + 'e9513a013011450c57cfe3ef51b7d4b0': 'Fixed (relative to window)', + '3059599d8ebfec00a8ab53346d9b4fa3': 'Absolute (relative to parent container)', + '86a6b5a0a45bba5b6187cc2277e3375e': 'Layout Location', + '6e72759ed1cbf9f9e8523197dd93888f': + 'Specifies the location of the current container element, which is used to configure top, right, bottom, and left.', + '6896da744f8ae9633263d55af0fceae1': 'Hierarchy', + '6f649980c839dffca1506f20d534fe3d': + 'Specifies the stacking order of elements. Elements at higher levels will always be above elements at lower levels.', + 'a8489cf57d7f44e889aff79434776f47': + 'The default is block level, which can be set to elastic layout mode (flex layout container)', + '4180e30c34190007ffaa654e0959b8a3': 'Intra row flexible layout', + 'ebe7bde5c9094813e2924473488d281a': 'In row block level', + 'dde193342b8c350ae29795117c0c5b9a': 'Horizontal Alignment', + '5b15af1f73b4f2d5bb152410863602f4': 'Vertical Alignment', + '78d32d2bd35c0262fe77b517c5a4fb62': 'Arrangement direction', + '3fa460b81736c0360f6f7571801935b1': + 'If the direction is set to horizontal arrangement, children are placed from left to right; If it is set to the vertical arrangement direction, the sub items will be set from top to bottom', + 'fa228d6bec96d052de0ad369407f5241': + 'Horizontal (starting point is at the right end)', + '2df3bc66ab3fcb0de1caf11831eff595': 'Vertical (starting point at lower edge)', + '98b2fea2d8f3ceb81e9ce32d66383f05': 'How to wrap lines', + '9af509c2a9636343199b9072e001826c': 'Default (no line breaks)', + 'd4054144c4341872496e3550fdb1b826': 'Word wrap (reverse)', + 'ee2df1c1a0d99094f641166535948d4b': 'Elastic mode', + '947c03e411c20563c7ac67d0a5ad741b': + 'After the elastic mode is set, the current area is automatically adapted', + 'f92626f9e56b3e2d0c47495a446acf71': 'Elastic width', + 'cf8852316501c22ea19c4e432c59e7d7': 'Default Width', + '9cc69c8469b23b77519065d3df381113': + 'Define the main size occupied by the project before allocating extra space', + '0ad8b3b736ae5b9e23cf16ac13e1e283': 'Proportion setting', + 'fa6bb048a2f73975a40789b30c5b8a06': + 'Defines the magnification of the project, which is 0 by default, that is, if there is any remaining space, it will not be magnified.', + 'c19b79073b676b9bade80613aba2dbfa': 'Fixed height', + 'd1b91a1a24f0d4935c2dd13e6a22b6d4': + 'The maximum width is the maximum horizontal display area of the current element', + 'c2ed47a1f0f45cf7e2d22bddffc8a732': + 'Scroll mode for setting horizontal direction', + 'cbc7af1d6422e88f4b87ade748e0f07d': 'Exceeding the display', + 'b48a90c77b5e792260d830c2d68c527e': 'Beyond hiding', + 'ddea62517e2bd1007712689746ebfe00': 'Scrolling', + '55becc96b40692cc9cf898b331d16976': 'Automatic adaptation', + 'ede82efb4a69c35743185c6c73ab771e': + 'The minimum width is the smallest horizontal display area of the current element', + '6f420734edfaff00a8210a4c762a9207': + 'The maximum height is the display height with the most current elements', + '411f9d120093314cd38e6dd5cce398c6': + 'The minimum width is the smallest vertical display area of the current element', + 'b31c6aaa78f8e24df665ce80ab5301e2': + 'Scroll mode for setting the vertical direction', + '4fc0e68b093db41b45a4ea706fbe56f3': 'Center Display', + '55efb233147f9539de019d9abc7653f9': 'Center display by setting margin: 0 auto' }); diff --git a/packages/amis-editor/src/locale/zh-CN.ts b/packages/amis-editor/src/locale/zh-CN.ts index ac4f6ab9e..ef46f0293 100644 --- a/packages/amis-editor/src/locale/zh-CN.ts +++ b/packages/amis-editor/src/locale/zh-CN.ts @@ -2945,5 +2945,66 @@ extendLocale('zh-CN', { 'ecfd82eb65102274188011a502913d3a': '抽屉数据', '951f802ebd0c0d795fbae6767a5ee9b3': '初始化接口请求成功', 'da0126992b4937a5fd847ef5366b02e6': '初始化接口请求成功返回的数据', - '70b8342d743374233bfee0f56c7f0fc7': '节点示例数据' + '70b8342d743374233bfee0f56c7f0fc7': '节点示例数据', + '38f85482d657cd4db1280c5efa1950fd': '{{@1}}对齐方式', + '0a0574baedb8eb2abf7daf25159d8bb1': '设置子元素在主轴上的对齐方式', + '5ccc4c05cd41195f202f550a4c307a64': '设置子元素在交叉轴上的对齐方式', + 'b1b98c19058af70d8bd499e1899e93bc': '布局容器', + '03097563d201ad3a29c79165226764e5': + '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用', + 'e151c86d57096bb74dcd390ade29362b': '新的一列', + 'e5f9b3a3655b8daddcee8b97b735887f': '向前插入布局容器', + '577b33bf128fba16ed8e9bf7c395f455': '向后插入布局容器', + '31f84d1bc6175fd0828a81b5bfd98736': '新增列级元素', + 'cbc1d00cc640b67ee34a29a694ef162a': '左侧（上侧）插入列级容器', + 'bb3cc092e17ff83e943554bde3d5771b': '右侧（下侧）插入列级容器', + 'b19b454fe603e03e98ad9772615c7c32': '定位模式', + '8444f01399c0003fbb68eeff1310566c': '指定当前容器元素的定位类型', + '5ddea41072a27a74a1715549dfb79bc2': '相对', + 'e9513a013011450c57cfe3ef51b7d4b0': '固定(相对窗口)', + '3059599d8ebfec00a8ab53346d9b4fa3': '绝对(相对父容器)', + '86a6b5a0a45bba5b6187cc2277e3375e': '布局位置', + '6e72759ed1cbf9f9e8523197dd93888f': + '指定当前容器元素的定位位置，用于配置 top、right、bottom、left。', + '6896da744f8ae9633263d55af0fceae1': '层级', + '6f649980c839dffca1506f20d534fe3d': + '指定元素的堆叠顺序，层级高的元素总是会处于较低层级元素的上面。', + 'a8489cf57d7f44e889aff79434776f47': + '默认为块级，可设置为弹性布局模式（flex布局容器）', + '4180e30c34190007ffaa654e0959b8a3': '行内弹性布局', + 'ebe7bde5c9094813e2924473488d281a': '行内块级', + 'dde193342b8c350ae29795117c0c5b9a': '水平对齐方式', + '5b15af1f73b4f2d5bb152410863602f4': '垂直对齐方式', + '78d32d2bd35c0262fe77b517c5a4fb62': '排列方向', + '3fa460b81736c0360f6f7571801935b1': + '设置成水平排列方向，则从左到右放置子项；设置成垂直排列方向，则从上到下放置子项', + 'fa228d6bec96d052de0ad369407f5241': '水平（起点在右端）', + '2df3bc66ab3fcb0de1caf11831eff595': '垂直（起点在下沿）', + '98b2fea2d8f3ceb81e9ce32d66383f05': '如何换行', + '9af509c2a9636343199b9072e001826c': '默认（不换行）', + 'd4054144c4341872496e3550fdb1b826': '自动换行（颠倒）', + 'ee2df1c1a0d99094f641166535948d4b': '弹性模式', + '947c03e411c20563c7ac67d0a5ad741b': '设置为弹性模式后，自动适配当前所在区域', + 'f92626f9e56b3e2d0c47495a446acf71': '弹性宽度', + 'cf8852316501c22ea19c4e432c59e7d7': '默认宽度', + '9cc69c8469b23b77519065d3df381113': + '定义在分配多余空间之前，项目占据的主轴空间（main size）', + '0ad8b3b736ae5b9e23cf16ac13e1e283': '占比设置', + 'fa6bb048a2f73975a40789b30c5b8a06': + '定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。', + 'c19b79073b676b9bade80613aba2dbfa': '固定高度', + 'd1b91a1a24f0d4935c2dd13e6a22b6d4': '最大宽度即当前元素最大的水平展示区域', + 'c18457fe4f249f06b48297ccfe6224e8': ' x轴滚动模式', + 'c2ed47a1f0f45cf7e2d22bddffc8a732': '用于设置水平方向的滚动模式', + 'cbc7af1d6422e88f4b87ade748e0f07d': '超出显示', + 'b48a90c77b5e792260d830c2d68c527e': '超出隐藏', + 'ddea62517e2bd1007712689746ebfe00': '滚动显示', + '55becc96b40692cc9cf898b331d16976': '自动适配', + 'ede82efb4a69c35743185c6c73ab771e': '最小宽度即当前元素最小的水平展示区域', + '6f420734edfaff00a8210a4c762a9207': '最大高度即当前元素最多的展示高度', + '411f9d120093314cd38e6dd5cce398c6': '最小宽度即当前元素最小的垂直展示区域', + 'ff9e9329fe186be342ef59ee711b9371': ' y轴滚动模式', + 'b31c6aaa78f8e24df665ce80ab5301e2': '用于设置垂直方向的滚动模式', + '4fc0e68b093db41b45a4ea706fbe56f3': '居中显示', + '55efb233147f9539de019d9abc7653f9': '通过将设置 margin: 0 auto 来达到居中显示' }); diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index a49c1774f..c914448dc 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -1,7 +1,6 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {BaseEventContext, BasePlugin, RegionConfig} from 'amis-editor-core'; -import {defaultValue, getSchemaTpl} from 'amis-editor-core'; -import {tipedLabel} from '../component/BaseControl'; +import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core'; export class ContainerPlugin extends BasePlugin { // 关联渲染器名字 @@ -132,7 +131,6 @@ export class ContainerPlugin extends BasePlugin { getSchemaTpl('layout:max-width'), getSchemaTpl('layout:min-width'), getSchemaTpl('layout:overflow-x'), - !isFlexItem ? getSchemaTpl('layout:margin-center') : null, ] }, diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 208066548..47d94d357 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -2,7 +2,7 @@ * @file Flex 常见布局 1:3 */ import {BasePlugin, PluginEvent} from 'amis-editor-core'; -import {getSchemaTpl} from 'amis-editor-core'; +import {getSchemaTpl, tipedLabel} from 'amis-editor-core'; import type { BaseEventContext, EditorNodeType, @@ -10,7 +10,6 @@ import type { RendererJSONSchemaResolveEventContext, BasicToolbarItem } from 'amis-editor-core'; -import {tipedLabel} from '../../component/BaseControl'; // 默认的列容器Schema const defaultFlexColumnSchema = (title: string) => { diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx deleted file mode 100644 index 88972e159..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @file Flex 常见布局 1:1 左右均分 - */ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_1 extends FlexPluginBase { - name = '左右均分'; - isBaseComponent = false; - pluginIcon = 'layout-2cols-plugin'; - description = '常见布局：左右均分布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 200; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '左右均分布局：第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(181, 242, 167, 1)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ] - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_1); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx deleted file mode 100644 index 834554fc4..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/** - * @file Flex 常见布局 1:1:1 三栏均分 - */ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_1_1 extends FlexPluginBase { - name = '三栏均分'; - isBaseComponent = false; - pluginIcon = 'layout-3cols-plugin'; - description = '常见布局：三栏均分布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 300; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '三栏均分布局：第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(181, 242, 167, 1)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第三列', - inline: false - } - ], - style: { - flex: '1 1 auto', - display: 'block', - flexBasis: 'auto', - flexGrow: 1, - backgroundColor: 'rgba(242, 54, 54, 0.51)' - } - } - ] - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_1_1); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx deleted file mode 100644 index 493acaff7..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @file Flex 常见布局 上中下布局 - */ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_1_1_v2 extends FlexPluginBase { - name = '上中下'; - isBaseComponent = false; - pluginIcon = 'layout-3row-plugin'; - description = '常见布局：上中下布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 303; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '上中下布局：第一行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - backgroundColor: 'rgba(245, 166, 35, 0.48)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第三行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - backgroundColor: 'rgba(74, 144, 226, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - } - ], - direction: 'column', - justify: 'center', - alignItems: 'stretch' - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_1_1_v2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx deleted file mode 100644 index 8e6a40274..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @file Flex 常见布局 上下布局 - */ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_1_v2 extends FlexPluginBase { - name = '上下布局'; - isBaseComponent = false; - pluginIcon = 'layout-2row-plugin'; - description = '常见布局：上下布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 203; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '上下布局：第一行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - backgroundColor: 'rgba(245, 166, 35, 0.48)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - } - ], - direction: 'column', - justify: 'center', - alignItems: 'stretch' - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_1_v2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx deleted file mode 100644 index 09839fbb5..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @file Flex 常见布局 1:2 - */ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_2 extends FlexPluginBase { - name = '1:2 布局'; - isBaseComponent = false; - pluginIcon = 'layout-2cols-plugin'; - description = '常见布局：1:2 布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 201; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '1:2 布局：第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(181, 242, 167, 1)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 2, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ] - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx deleted file mode 100644 index 4ff56875f..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_3.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/** - * @file Flex 常见布局 1:2:3 - */ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_2_3 extends FlexPluginBase { - name = '1:2:3 三栏'; - isBaseComponent = false; - pluginIcon = 'layout-3cols-plugin'; - description = '常见布局：1:2:3 三栏布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 301; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '1:2:3 三栏布局：第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(181, 242, 167, 1)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 2, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第三列', - inline: false - } - ], - style: { - flex: '1 1 auto', - display: 'block', - flexBasis: 'auto', - flexGrow: 3, - backgroundColor: 'rgba(242, 54, 54, 0.51)' - } - } - ] - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_2_3); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx deleted file mode 100644 index 158e3f678..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_2_v2 extends FlexPluginBase { - name = '一拖二'; - isBaseComponent = false; - pluginIcon = 'layout-1with2-plugin'; - description = '常见布局：一拖二布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 303; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '一拖二布局：第一行', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '100px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ], - style: { - flex: '1 1 auto', - padding: 0 - }, - alignItems: 'stretch' - } - ], - style: { - overflowX: 'auto', - margin: '0', - maxWidth: 'auto', - height: '350px', - overflowY: 'auto' - }, - direction: 'column', - justify: 'center', - alignItems: 'stretch', - isFixedHeight: true - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_2_v2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx deleted file mode 100644 index 129a60304..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_2_v3 extends FlexPluginBase { - name = '左一右二'; - isBaseComponent = false; - pluginIcon = 'layout-1-2-plugin'; - description = '常见布局：左一右二布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 304; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '一拖二布局：第一列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '250px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ], - style: { - flex: '1 1 auto', - margin: '0' - }, - alignItems: 'stretch', - direction: 'column', - justify: 'center' - } - ], - style: { - overflowX: 'auto', - margin: '0', - maxWidth: 'auto', - height: '350px', - overflowY: 'auto' - }, - direction: 'row', - justify: 'center', - alignItems: 'stretch', - isFixedHeight: true - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_2_v3); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx deleted file mode 100644 index f3d93bcb0..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_2_v4 extends FlexPluginBase { - name = '经典布局'; - isBaseComponent = false; - pluginIcon = 'layout-3-1-plugin'; - description = '常见布局：经典布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 307; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '经典布局：第一行', - inline: false - } - ], - style: { - flex: '0 0 auto', - backgroundColor: 'rgba(74, 144, 226, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '250px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第一行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ], - style: { - position: 'static', - overflowX: 'auto', - overflowY: 'auto', - margin: '0', - flex: '1 1 auto', - flexGrow: 1, - flexBasis: 'auto' - }, - alignItems: 'stretch', - direction: 'column', - justify: 'center', - isFixedHeight: false, - isFixedWidth: false - } - ], - style: { - flex: '1 1 auto', - overflowX: 'auto', - margin: '0', - maxWidth: 'auto', - overflowY: 'auto', - position: 'static', - minWidth: 'auto', - width: 'auto', - maxHeight: 'auto', - minHeight: '300px' - }, - direction: 'row', - justify: 'flex-start', - alignItems: 'stretch', - isFixedHeight: false, - isFixedWidth: false - } - ], - direction: 'column', - justify: 'center', - alignItems: 'stretch' - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_2_v4); diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx deleted file mode 100644 index 6224fd728..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout1_3.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @file Flex 常见布局 1:3 - */ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout1_3 extends FlexPluginBase { - name = '1:3 布局'; - isBaseComponent = false; - pluginIcon = 'layout-2cols-plugin'; - description = '常见布局：1:3 布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 202; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '1:3 布局：第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(181, 242, 167, 1)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 3, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ] - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout1_3); diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx deleted file mode 100644 index 13dd65119..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx +++ /dev/null @@ -1,98 +0,0 @@ -/** - * @file Flex 常见布局 二拖一布局 - */ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout2_1_v2 extends FlexPluginBase { - name = '二拖一'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'layout-2with1-plugin'; - description = '常见布局：二拖一布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 305; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '二拖一布局：第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ], - style: { - flex: '0 0 auto', - flexBasis: '100px' - }, - alignItems: 'stretch' - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: '200px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - } - ], - style: { - overflowX: 'auto', - margin: '0', - maxWidth: 'auto', - height: '350px', - overflowY: 'auto' - }, - direction: 'column', - justify: 'center', - alignItems: 'stretch', - isFixedHeight: true - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout2_1_v2); diff --git a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx b/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx deleted file mode 100644 index c9bf26652..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout2_1_v3 extends FlexPluginBase { - name = '左二右一'; - isBaseComponent = false; // 在自定义组件面板中展示 - pluginIcon = 'layout-2-1-plugin'; - description = '常见布局：左二右一布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 306; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '左二右一布局：第一行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(71, 92, 233, 0.68)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二行', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - } - ], - style: { - flex: '1 1 auto' - }, - alignItems: 'stretch', - direction: 'column', - justify: 'center' - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '250px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - } - ], - style: { - overflowX: 'auto', - margin: '0', - maxWidth: 'auto', - height: '350px', - overflowY: 'auto' - }, - direction: 'row', - justify: 'center', - alignItems: 'stretch', - isFixedHeight: true - }; - previewSchema = { - ...this.scaffold - }; -} - -registerEditorPlugin(Layout2_1_v3); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx deleted file mode 100644 index d393f2112..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout_fixed extends FlexPluginBase { - name = '悬浮容器'; - isBaseComponent = false; - pluginIcon = 'layout-fixed-plugin'; - description = '常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 503; - scaffold: any = { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '悬浮容器', - inline: false - } - ], - style: { - backgroundColor: 'rgba(71, 92, 233, 0.68)', - position: 'fixed', - inset: 'auto 50px 50px auto', - zIndex: 10, - display: 'flex', - borderTopLeftRadius: 50, - borderTopRightRadius: 50, - borderBottomLeftRadius: 50, - borderBottomRightRadius: 50, - minWidth: '80px', - minHeight: '80px', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'stretch' - } - }; - previewSchema = { - ...this.scaffold, - style: { - position: 'static' - } - }; -} - -registerEditorPlugin(Layout_fixed); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx deleted file mode 100644 index 268fcf792..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout_fixed_bottom extends FlexPluginBase { - name = '吸底容器'; - isBaseComponent = false; - pluginIcon = 'flex-container-plugin'; - description = '常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 501; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '吸底容器：第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'stretch', - backgroundColor: 'rgba(181, 242, 167, 1)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'stretch', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第三列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'stretch', - backgroundColor: 'rgba(242, 54, 54, 0.51)' - } - } - ], - style: { - position: 'fixed', - inset: 'auto auto 0 0', - zIndex: 2, - width: '100%', - overflowX: 'auto', - margin: '0', - overflowY: 'auto', - height: 'auto' - }, - isFixedWidth: true, - direction: 'row', - justify: 'center', - alignItems: 'stretch', - isFixedHeight: false - }; - previewSchema = { - ...this.scaffold, - style: { - position: 'static' - } - }; -} - -registerEditorPlugin(Layout_fixed_bottom); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx deleted file mode 100644 index 84ac25a48..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout_fixed_top extends FlexPluginBase { - name = '吸顶容器'; - isBaseComponent = false; - pluginIcon = 'flex-container-plugin'; - description = '常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 502; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '吸顶容器：第一列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(181, 242, 167, 1)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '1 1 auto', - flexBasis: 'auto', - flexGrow: 1, - display: 'block', - backgroundColor: 'rgba(245, 166, 35, 0.48)' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第三列', - inline: false - } - ], - style: { - flex: '1 1 auto', - display: 'block', - flexBasis: 'auto', - flexGrow: 1, - backgroundColor: 'rgba(242, 54, 54, 0.51)' - } - } - ], - style: { - position: 'fixed', - inset: '0 auto auto 0', - zIndex: 10, - width: '100%', - overflowX: 'auto', - margin: '0', - overflowY: 'auto', - height: '55px' - }, - isFixedWidth: true, - direction: 'row', - justify: 'center', - alignItems: 'stretch', - isFixedHeight: false - }; - previewSchema = { - ...this.scaffold, - style: { - position: 'static' - } - }; -} - -registerEditorPlugin(Layout_fixed_top); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx deleted file mode 100644 index 33bac9761..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout_scroll_x extends FlexPluginBase { - name = 'x轴滚动容器'; - isBaseComponent = false; - pluginIcon = 'layout-3cols-plugin'; - description = '常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 505; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: 'x轴滚动容器：第一列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '200px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '200px', - backgroundColor: 'rgba(245, 166, 35, 0.48)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第三列', - inline: false - } - ], - style: { - flex: '0 0 auto', - backgroundColor: 'rgba(74, 144, 226, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto', - flexBasis: '200px' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第四列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '200px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第五列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '200px', - backgroundColor: 'rgba(245, 166, 35, 0.48)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第六列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '200px', - backgroundColor: 'rgba(74, 144, 226, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第七列', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '200px', - backgroundColor: 'rgba(228, 114, 221, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - } - ], - direction: 'row', - justify: 'flex-start', - alignItems: 'stretch', - style: { - position: 'static', - minHeight: 'auto', - maxWidth: '1080px', - minWidth: 'auto', - height: '200px', - overflowX: 'scroll', - overflowY: 'scroll', - margin: '0 auto' - }, - isFixedHeight: true, - isFixedWidth: false - }; - previewSchema = { - ...this.scaffold, - style: { - position: 'static' - } - }; -} - -registerEditorPlugin(Layout_scroll_x); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx deleted file mode 100644 index 8bfbb3afd..000000000 --- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import {registerEditorPlugin} from 'amis-editor-core'; -import {FlexPluginBase} from './FlexPluginBase'; - -export class Layout_scroll_y extends FlexPluginBase { - name = 'y轴滚动容器'; - isBaseComponent = false; - pluginIcon = 'layout-3row-plugin'; - description = '常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; - order = 504; - scaffold: any = { - type: 'flex', - items: [ - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: 'y轴滚动容器：第一行', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '60px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第二行', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '60px', - backgroundColor: 'rgba(245, 166, 35, 0.48)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第三行', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '60px', - backgroundColor: 'rgba(74, 144, 226, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第四行', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '60px', - backgroundColor: 'rgba(181, 242, 167, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第五行', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '60px', - backgroundColor: 'rgba(245, 166, 35, 0.48)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - }, - { - type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: '第六行', - inline: false - } - ], - style: { - flex: '0 0 auto', - flexBasis: '60px', - backgroundColor: 'rgba(74, 144, 226, 1)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'stretch', - position: 'static', - minWidth: 'auto', - minHeight: 'auto' - } - } - ], - direction: 'column', - justify: 'flex-start', - alignItems: 'stretch', - style: { - position: 'static', - minHeight: 'auto', - maxWidth: 'auto', - minWidth: 'auto', - height: '200px', - width: 'auto', - overflowX: 'auto', - overflowY: 'scroll', - margin: '0' - }, - isFixedHeight: true, - isFixedWidth: false - }; - previewSchema = { - ...this.scaffold, - style: { - position: 'static' - } - }; -} - -registerEditorPlugin(Layout_scroll_y); diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index b8f5e899d..c22c28f00 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -1,5 +1,4 @@ -import {setSchemaTpl, getSchemaTpl, defaultValue} from 'amis-editor-core'; -import {tipedLabel} from '../component/BaseControl' +import {setSchemaTpl, getSchemaTpl, defaultValue, tipedLabel} from 'amis-editor-core'; import isNumber from 'lodash/isNumber'; import isString from 'lodash/isString'; From e8549dc2f979fcddd4b275c37df04589e51b01bd Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 2 Nov 2022 19:22:29 +0800 Subject: [PATCH 25/40] =?UTF-8?q?fix(amis-saas-7727):=20=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I3d31df6e101be39a6fbc2372c700b1fcae62b75e --- .../src/plugin/Layout/FlexPluginBase.tsx | 23 +++++++++++-------- packages/amis-editor/src/plugin/Wrapper.tsx | 1 - 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 47d94d357..8603202e2 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -13,25 +13,27 @@ import type { // 默认的列容器Schema const defaultFlexColumnSchema = (title: string) => { + /* + { + type: 'tpl', + tpl: title || '新的一列', + inline: false + } + */ return { type: 'wrapper', - body: [ - { - type: 'tpl', - tpl: title || '新的一列', - inline: false - } - ], + body: [], + size: 'xs', style: { position: 'static', display: 'flex', flex: '1 1 auto', flexGrow: 1, flexBasis: 'auto', - flexDirection: 'row', - justifyContent: 'center', + flexDirection: 'column', + justifyContent: 'flex-start', alignItems: 'stretch', - flexWrap: 'nowrap' + flexWrap: 'wrap' }, isFixedHeight: false, isFixedWidth: false @@ -40,6 +42,7 @@ const defaultFlexColumnSchema = (title: string) => { // 默认的布局容器Schema const defaultFlexContainerSchema = { type: 'flex', + className: 'p-1', items: [ defaultFlexColumnSchema('第一列'), defaultFlexColumnSchema('第二列'), diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index 2dc84c039..d17e665d2 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -1,7 +1,6 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core'; import {defaultValue, getSchemaTpl} from 'amis-editor-core'; -import {tipedLabel} from '../component/BaseControl'; export class WrapperPlugin extends BasePlugin { // 关联渲染器名字 From 26b56c00702717e7fe773dfe61ab7c51df1267a9 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 2 Nov 2022 20:16:33 +0800 Subject: [PATCH 26/40] =?UTF-8?q?fix(=E5=B8=83=E5=B1=80=E8=83=BD=E5=8A=9B?= =?UTF-8?q?=E6=8F=90=E5=8D=87amis-saas-7790):=20=E6=9C=80=E5=A4=A7?= =?UTF-8?q?=E6=9C=80=E5=B0=8F=E5=AE=BD=E9=AB=98=E5=A2=9E=E5=8A=A0=E5=85=B3?= =?UTF-8?q?=E8=81=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I918c6f53cddbbb97fb23425bab3a97147eeb0ac3 --- .../src/plugin/Layout/FlexPluginBase.tsx | 7 --- packages/amis-editor/src/tpl/layout.tsx | 54 ++++++++++--------- 2 files changed, 29 insertions(+), 32 deletions(-) diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 8603202e2..653b2878f 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -13,13 +13,6 @@ import type { // 默认的列容器Schema const defaultFlexColumnSchema = (title: string) => { - /* - { - type: 'tpl', - tpl: title || '新的一列', - inline: false - } - */ return { type: 'wrapper', body: [], diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index c22c28f00..e008db0fb 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -633,31 +633,6 @@ setSchemaTpl( }; }); -// 最大宽度设置 -setSchemaTpl( - 'layout:max-width', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最大的水平展示区域'), - name: config?.name || 'style.maxWidth', - value: config?.value, - visibleOn: config?.visibleOn ?? '!data.isFixedWidth', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - }; -}); - // x轴（水平轴）滚动模式 setSchemaTpl( 'layout:overflow-x', @@ -698,6 +673,32 @@ setSchemaTpl( }; }); +// 最大宽度设置 +setSchemaTpl( + 'layout:max-width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最大的水平展示区域'), + name: config?.name || 'style.maxWidth', + value: config?.value, + min: '${style.minWidth | toInt}', + visibleOn: config?.visibleOn ?? '!data.isFixedWidth', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + // 最小宽度设置 setSchemaTpl( 'layout:min-width', @@ -715,6 +716,7 @@ setSchemaTpl( label: config?.label || tipedLabel('最小宽度', '最小宽度即当前元素最小的水平展示区域'), name: config?.name || 'style.minWidth', value: config?.value, + max: '${style.maxWidth | toInt}', visibleOn: config?.visibleOn ?? '!data.isFixedWidth', clearable: true, unitOptions: config?.unitOptions ?? LayoutUnitOptions, @@ -798,6 +800,7 @@ setSchemaTpl( label: config?.label || tipedLabel('最大高度', '最大高度即当前元素最多的展示高度'), name: config?.name || 'style.maxHeight', value: config?.value, + min: '${style.minHeight | toInt}', visibleOn: config?.visibleOn ?? '!data.isFixedHeight', clearable: true, unitOptions: config?.unitOptions ?? LayoutUnitOptions, @@ -823,6 +826,7 @@ setSchemaTpl( label: config?.label || tipedLabel('最小高度', '最小宽度即当前元素最小的垂直展示区域'), name: config?.name || 'style.minHeight', value: config?.value, + max: '${style.maxHeight | toInt}', visibleOn: config?.visibleOn ?? '!data.isFixedHeight', clearable: true, unitOptions: config?.unitOptions ?? LayoutUnitOptions, From 4b54ad823e31b7530480c1b7c285d0ab9701b7e2 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Thu, 3 Nov 2022 20:31:11 +0800 Subject: [PATCH 27/40] =?UTF-8?q?fix(=E5=B8=83=E5=B1=80=E8=83=BD=E5=8A=9B?= =?UTF-8?q?=E6=8F=90=E5=8D=87=E9=A1=B9amis-saas-7852):=20=E3=80=8C?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=BB=84=E4=BB=B6=E3=80=8Dfixed=E5=92=8Cabso?= =?UTF-8?q?lute=E5=AE=9A=E4=BD=8D=E6=97=B6=EF=BC=8C=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E3=80=8C=E5=8F=82=E8=80=83=E4=BD=8D=E7=BD=AE=E3=80=8D=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: If3f33a320a8290fb36bce090a794d3619cccc214 --- packages/amis-editor/src/locale/en-US.ts | 9 +- packages/amis-editor/src/locale/zh-CN.ts | 9 +- .../src/plugin/Layout/FlexPluginBase.tsx | 2 + packages/amis-editor/src/tpl/layout.tsx | 86 +++++++++++++++++-- 4 files changed, 97 insertions(+), 9 deletions(-) diff --git a/packages/amis-editor/src/locale/en-US.ts b/packages/amis-editor/src/locale/en-US.ts index e07b9d92f..e485894c6 100644 --- a/packages/amis-editor/src/locale/en-US.ts +++ b/packages/amis-editor/src/locale/en-US.ts @@ -3403,5 +3403,12 @@ extendLocale('en-US', { 'b31c6aaa78f8e24df665ce80ab5301e2': 'Scroll mode for setting the vertical direction', '4fc0e68b093db41b45a4ea706fbe56f3': 'Center Display', - '55efb233147f9539de019d9abc7653f9': 'Center display by setting margin: 0 auto' + '55efb233147f9539de019d9abc7653f9': + 'Center display by setting margin: 0 auto', + '2bf5bcbe21f39b254a601664fb8b264d': 'Default (Wrap)', + 'b2d418355cb59a5613ecff7b150c588f': 'nowrap ', + '7d1313925f158b747c094a7f2480e535': 'Reference position', + '41a7494315a528f0f9618646f7e0dddf': + 'It can be set as upper left corner, upper right corner, lower right corner and lower left corner. The default is lower right corner', + '845c61ac8f51c6702dd22e5657c07e8d': 'Lower right corner (default)' }); diff --git a/packages/amis-editor/src/locale/zh-CN.ts b/packages/amis-editor/src/locale/zh-CN.ts index ef46f0293..85432f486 100644 --- a/packages/amis-editor/src/locale/zh-CN.ts +++ b/packages/amis-editor/src/locale/zh-CN.ts @@ -3006,5 +3006,12 @@ extendLocale('zh-CN', { 'ff9e9329fe186be342ef59ee711b9371': ' y轴滚动模式', 'b31c6aaa78f8e24df665ce80ab5301e2': '用于设置垂直方向的滚动模式', '4fc0e68b093db41b45a4ea706fbe56f3': '居中显示', - '55efb233147f9539de019d9abc7653f9': '通过将设置 margin: 0 auto 来达到居中显示' + '55efb233147f9539de019d9abc7653f9': + '通过将设置 margin: 0 auto 来达到居中显示', + '2bf5bcbe21f39b254a601664fb8b264d': '默认（自动换行）', + 'b2d418355cb59a5613ecff7b150c588f': '不换行', + '7d1313925f158b747c094a7f2480e535': '参考位置', + '41a7494315a528f0f9618646f7e0dddf': + '可设置为左上角、右上角、右下角、左下角，默认为右下角', + '845c61ac8f51c6702dd22e5657c07e8d': '右下角(默认)' }); diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 653b2878f..dc7e0257e 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -104,6 +104,7 @@ export class FlexPluginBase extends BasePlugin { getSchemaTpl('layout:inset', { mode: 'vertical' }), + getSchemaTpl('layout:originPosition'), getSchemaTpl('layout:z-index'), getSchemaTpl('layout:flexDirection', { name: 'direction' @@ -207,6 +208,7 @@ export class FlexPluginBase extends BasePlugin { (info.renderer.name === 'flex' || info.renderer.name === 'container') && !draggableContainer ) { + // 非特殊布局元素（fixed、absolute）支持前后插入追加布局元素功能icon toolbars.push( { iconSvg: 'add-btn', diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index e008db0fb..8e3f45bae 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -54,6 +54,9 @@ setSchemaTpl( if (value === 'static') { form.setValueByName('style.inset', undefined); form.setValueByName('style.zIndex', undefined); + } else if (value === 'fixed' || value === 'absolute') { + // 默认使用右下角进行相对定位 + form.setValueByName('style.inset', 'auto 50px 50px auto'); } }, options: [ @@ -386,7 +389,6 @@ setSchemaTpl( } if (config?.mode === 'vertical') { - // 上下展示，可避免 自定义渲染器 出现挤压 return { type: 'group', mode: 'vertical', @@ -398,7 +400,6 @@ setSchemaTpl( ] }; } else { - // 默认左右展示 return configSchema; } }); @@ -476,18 +477,18 @@ setSchemaTpl( type: 'select', label: config?.label || '如何换行', name: config?.name || 'style.flexWrap', - value: config?.value || 'nowrap', + value: config?.value || 'wrap', visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, options: [ { - label: '默认（不换行）', - value: 'nowrap' + label: '默认（自动换行）', + value: 'wrap' }, { - label: '自动换行', - value: 'wrap' + label: '不换行', + value: 'nowrap' }, { label: '自动换行（颠倒）', @@ -914,4 +915,75 @@ setSchemaTpl( return value ? '0 auto' : '0'; } }; +}); + +//「参考位置」可设置为左上角、右上角、右下角、左下角，默认为“右下角”。 +setSchemaTpl( + 'layout:originPosition', + (config?: { + mode?: string; + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + const configSchema = { + type: 'select', + label: config?.label || tipedLabel('参考位置', '可设置为左上角、右上角、右下角、左下角，默认为右下角'), + name: config?.name || 'originPosition', + value: config?.value || 'right-bottom', + visibleOn: config?.visibleOn ?? 'data.style && data.style.position && (data.style.position === "fixed" || data.style.position === "absolute")', + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '左上角', + value: 'left-top' + }, + { + label: '右上角', + value: 'right-top' + }, + { + label: '右下角(默认)', + value: 'right-bottom' + }, + { + label: '左下角', + value: 'left-bottom' + }, + ], + onChange: (value: string, oldValue: string, model: any, form: any) => { + if (value === 'right-bottom') { + // 右下角 + form.setValueByName('style.inset', 'auto 50px 50px auto'); + } else if (value === 'left-top') { + // 左上角 + form.setValueByName('style.inset', '50px auto auto 50px'); + } else if (value === 'right-top') { + // 右上角 + form.setValueByName('style.inset', '50px 50px auto auto'); + } else if (value === 'left-bottom') { + // 左下角 + form.setValueByName('style.inset', 'auto auto 50px 50px'); + } + }, + } + + if (config?.mode === 'vertical') { + return { + type: 'group', + mode: 'vertical', + visibleOn: config?.visibleOn, + body: [ + { + ...configSchema + } + ] + }; + } else { + return configSchema; + } }); \ No newline at end of file From f72bf5891833948312d2b857bc0eab5b53cd4034 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Fri, 4 Nov 2022 14:03:08 +0800 Subject: [PATCH 28/40] =?UTF-8?q?fix(=E5=B8=83=E5=B1=80=E8=83=BD=E5=8A=9B?= =?UTF-8?q?=E6=8F=90=E5=8D=87amis-saas-7924):=20=E5=BD=93wrapper=E4=B8=BA?= =?UTF-8?q?=E7=A9=BA=E6=8F=92=E5=85=A5=E5=B8=83=E5=B1=80=E5=AE=B9=E5=99=A8?= =?UTF-8?q?=E6=97=B6=EF=BC=8C=E8=87=AA=E5=8A=A8=E6=94=B9=E4=B8=BA=E7=BD=AE?= =?UTF-8?q?=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Icafb6c50d53ebcb876f82e5f75ca3168ab7989d1 --- packages/amis-editor/src/locale/en-US.ts | 6 ++- packages/amis-editor/src/locale/zh-CN.ts | 6 ++- packages/amis-editor/src/plugin/Container.tsx | 7 +--- packages/amis-editor/src/plugin/Flex.tsx | 2 +- .../src/plugin/Layout/FlexPluginBase.tsx | 37 +++++++++++-------- packages/amis-editor/src/tpl/layout.tsx | 14 +++---- 6 files changed, 41 insertions(+), 31 deletions(-) diff --git a/packages/amis-editor/src/locale/en-US.ts b/packages/amis-editor/src/locale/en-US.ts index e485894c6..658384f25 100644 --- a/packages/amis-editor/src/locale/en-US.ts +++ b/packages/amis-editor/src/locale/en-US.ts @@ -3410,5 +3410,9 @@ extendLocale('en-US', { '7d1313925f158b747c094a7f2480e535': 'Reference position', '41a7494315a528f0f9618646f7e0dddf': 'It can be set as upper left corner, upper right corner, lower right corner and lower left corner. The default is lower right corner', - '845c61ac8f51c6702dd22e5657c07e8d': 'Lower right corner (default)' + '845c61ac8f51c6702dd22e5657c07e8d': 'Lower right corner (default)', + '2794fe303cf8ad4395fe93271fae7925': + 'Layout containers are mainly used to design container components with complex layouts. The layout effect implemented based on CSS Flex is more controllable than Grid and HBox for the location of child nodes, and easier to use than using CSS classes', + 'abbd790f85282349e2004df9fd494e31': + 'Main size occupied by default before allocating extra space' }); diff --git a/packages/amis-editor/src/locale/zh-CN.ts b/packages/amis-editor/src/locale/zh-CN.ts index 85432f486..331e649b4 100644 --- a/packages/amis-editor/src/locale/zh-CN.ts +++ b/packages/amis-editor/src/locale/zh-CN.ts @@ -3013,5 +3013,9 @@ extendLocale('zh-CN', { '7d1313925f158b747c094a7f2480e535': '参考位置', '41a7494315a528f0f9618646f7e0dddf': '可设置为左上角、右上角、右下角、左下角，默认为右下角', - '845c61ac8f51c6702dd22e5657c07e8d': '右下角(默认)' + '845c61ac8f51c6702dd22e5657c07e8d': '右下角(默认)', + '2794fe303cf8ad4395fe93271fae7925': + '布局容器主要用于设计复杂布局的容器组件，基于 CSS Flex 实现的布局效果，比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更简单易用', + 'abbd790f85282349e2004df9fd494e31': + '在分配多余空间之前，其默认占据的主轴空间（main size）' }); diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index c914448dc..3f5175c84 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -17,12 +17,7 @@ export class ContainerPlugin extends BasePlugin { pluginIcon = 'container-plugin'; scaffold = { type: 'container', - body: [ - { - type: 'tpl', - tpl: '内容' - } - ] + body: [] }; previewSchema = { ...this.scaffold diff --git a/packages/amis-editor/src/plugin/Flex.tsx b/packages/amis-editor/src/plugin/Flex.tsx index 76a79e201..e8d53248d 100644 --- a/packages/amis-editor/src/plugin/Flex.tsx +++ b/packages/amis-editor/src/plugin/Flex.tsx @@ -8,7 +8,7 @@ export class FlexPlugin extends FlexPluginBase { name = '布局容器'; pluginIcon = 'flex-container-plugin'; description = - '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; + '布局容器主要用于设计复杂布局的容器组件，基于 CSS Flex 实现的布局效果，比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更简单易用'; } registerEditorPlugin(FlexPlugin); diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index dc7e0257e..73ddeb7f9 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -25,8 +25,7 @@ const defaultFlexColumnSchema = (title: string) => { flexBasis: 'auto', flexDirection: 'column', justifyContent: 'flex-start', - alignItems: 'stretch', - flexWrap: 'wrap' + alignItems: 'stretch' }, isFixedHeight: false, isFixedWidth: false @@ -40,7 +39,9 @@ const defaultFlexContainerSchema = { defaultFlexColumnSchema('第一列'), defaultFlexColumnSchema('第二列'), defaultFlexColumnSchema('第三列') - ] + ], + justify: "flex-start", + alignItems: "stretch" }; export class FlexPluginBase extends BasePlugin { @@ -205,7 +206,7 @@ export class FlexPluginBase extends BasePlugin { if ( parent && - (info.renderer.name === 'flex' || info.renderer.name === 'container') && + (info.renderer?.name === 'flex' || info.renderer?.name === 'container') && !draggableContainer ) { // 非特殊布局元素（fixed、absolute）支持前后插入追加布局元素功能icon @@ -214,7 +215,7 @@ export class FlexPluginBase extends BasePlugin { iconSvg: 'add-btn', tooltip: '向前插入布局容器', level: 'special', - placement: 'top', + placement: 'bottom', className: 'ae-InsertBefore is-vertical', onClick: () => this.manager.appendSiblingSchema( @@ -235,16 +236,22 @@ export class FlexPluginBase extends BasePlugin { false, true ) - }, - { - iconSvg: 'add-btn', - tooltip: '新增列级元素', - level: 'special', - placement: 'bottom', - className: 'ae-AppendChild', - onClick: () => this.manager.addElem(newColumnSchema) } ); + + // 布局容器 右上角插入子元素 + if (info.renderer?.name === 'flex') { + toolbars.push( + { + iconSvg: 'add-btn', + tooltip: '新增列级元素', + level: 'special', + placement: 'bottom', + className: 'ae-AppendChild', + onClick: () => this.manager.addElem(newColumnSchema) + } + ); + } } if (isFlexItem && !draggableContainer) { @@ -254,7 +261,7 @@ export class FlexPluginBase extends BasePlugin { iconSvg: 'add-btn', tooltip: '左侧（上侧）插入列级容器', level: 'special', - placement: 'bottom', + placement: 'right', className: 'ae-InsertBefore', onClick: () => this.manager.appendSiblingSchema(newColumnSchema, true, true) @@ -263,7 +270,7 @@ export class FlexPluginBase extends BasePlugin { iconSvg: 'add-btn', tooltip: '右侧（下侧）插入列级容器', level: 'special', - placement: 'bottom', + placement: 'left', className: 'ae-InsertAfter', onClick: () => this.manager.appendSiblingSchema(newColumnSchema, false, true) diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 8e3f45bae..ea772943c 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -278,7 +278,7 @@ setSchemaTpl( type: 'select', label: config?.label || tipedLabel(`水平对齐方式`, '设置子元素在主轴上的对齐方式'), name: config?.name || 'style.justifyContent', - value: config?.value || 'center', + value: config?.value || 'flex-start', visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, @@ -477,18 +477,18 @@ setSchemaTpl( type: 'select', label: config?.label || '如何换行', name: config?.name || 'style.flexWrap', - value: config?.value || 'wrap', + value: config?.value || 'nowrap', visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, options: [ { - label: '默认（自动换行）', - value: 'wrap' + label: '默认（不换行）', + value: 'nowrap' }, { - label: '不换行', - value: 'nowrap' + label: '自动换行', + value: 'wrap' }, { label: '自动换行（颠倒）', @@ -541,7 +541,7 @@ setSchemaTpl( }) => { return { type: 'input-number', - label: config?.label || tipedLabel('默认宽度', '定义在分配多余空间之前，项目占据的主轴空间（main size）'), + label: config?.label || tipedLabel('默认宽度', '在分配多余空间之前，其默认占据的主轴空间（main size）'), name: config?.name || 'style.flexBasis', value: config?.value || 'auto', visibleOn: config?.visibleOn, From 55eeb3a6995f9f67fd55a5d67be8ebecf1554d7e Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Sun, 6 Nov 2022 23:46:36 +0800 Subject: [PATCH 29/40] =?UTF-8?q?fix(=E5=B8=83=E5=B1=80=E7=BB=84=E4=BB=B6a?= =?UTF-8?q?mis-saas-7939):=20=E5=8C=85=E8=A3=B9=E5=AE=B9=E5=99=A8=E4=B8=8A?= =?UTF-8?q?=E4=B8=8B=E8=BF=BD=E5=8A=A0=E5=85=83=E7=B4=A0icon=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E8=87=AA=E9=80=82=E5=BA=94=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I16b1710885223ee95ede81a0e21ff6360f3bd65a --- packages/amis-editor/package.json | 8 ------- packages/amis-editor/src/locale/en-US.ts | 7 +++++- packages/amis-editor/src/locale/zh-CN.ts | 7 +++++- packages/amis-editor/src/plugin/Container.tsx | 1 + .../src/plugin/Layout/FlexPluginBase.tsx | 23 +++++++++++-------- packages/amis-editor/src/plugin/Wrapper.tsx | 2 ++ packages/amis-editor/src/tpl/layout.tsx | 2 +- 7 files changed, 29 insertions(+), 21 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 40d94d46b..0b2d20825 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -23,14 +23,6 @@ "lib", "esm" ], - "lint-staged": { - "{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}": [ - "prettier --write" - ], - "{src,scss,examples}/**/**/*.scss": [ - "stylelint" - ] - }, "dependencies": { "@webcomponents/webcomponentsjs": "^2.6.0", "amis-editor-core": "*", diff --git a/packages/amis-editor/src/locale/en-US.ts b/packages/amis-editor/src/locale/en-US.ts index 658384f25..a59277047 100644 --- a/packages/amis-editor/src/locale/en-US.ts +++ b/packages/amis-editor/src/locale/en-US.ts @@ -3414,5 +3414,10 @@ extendLocale('en-US', { '2794fe303cf8ad4395fe93271fae7925': 'Layout containers are mainly used to design container components with complex layouts. The layout effect implemented based on CSS Flex is more controllable than Grid and HBox for the location of child nodes, and easier to use than using CSS classes', 'abbd790f85282349e2004df9fd494e31': - 'Main size occupied by default before allocating extra space' + 'Main size occupied by default before allocating extra space', + 'dbb93e8f413074ead24b6ed822247d98': 'Insert Layout Container Above', + '5b5765b3fd7e72e04a5cd3e2ef6218a4': 'Insert Layout Container Below', + 'ee466872b9a43e720e296813dbc5adee': '{{@1}} Insert Column Level Container', + '14c495b1248756310c75396cd41f4fe9': 'upper', + 'e33ac3a4c1a95a02a18f1555038804da': 'Below' }); diff --git a/packages/amis-editor/src/locale/zh-CN.ts b/packages/amis-editor/src/locale/zh-CN.ts index 331e649b4..4f9670d52 100644 --- a/packages/amis-editor/src/locale/zh-CN.ts +++ b/packages/amis-editor/src/locale/zh-CN.ts @@ -3017,5 +3017,10 @@ extendLocale('zh-CN', { '2794fe303cf8ad4395fe93271fae7925': '布局容器主要用于设计复杂布局的容器组件，基于 CSS Flex 实现的布局效果，比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更简单易用', 'abbd790f85282349e2004df9fd494e31': - '在分配多余空间之前，其默认占据的主轴空间（main size）' + '在分配多余空间之前，其默认占据的主轴空间（main size）', + 'dbb93e8f413074ead24b6ed822247d98': '上方插入布局容器', + '5b5765b3fd7e72e04a5cd3e2ef6218a4': '下方插入布局容器', + 'ee466872b9a43e720e296813dbc5adee': '{{@1}}插入列级容器', + '14c495b1248756310c75396cd41f4fe9': '上方', + 'e33ac3a4c1a95a02a18f1555038804da': '下方' }); diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index 3f5175c84..af2fac168 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -88,6 +88,7 @@ export class ContainerPlugin extends BasePlugin { visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', }) : null, getSchemaTpl('layout:position'), + getSchemaTpl('layout:originPosition'), getSchemaTpl('layout:inset', { mode: 'vertical' }), diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 73ddeb7f9..520f1c1db 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -102,10 +102,10 @@ export class FlexPluginBase extends BasePlugin { }) : null, getSchemaTpl('layout:position'), + getSchemaTpl('layout:originPosition'), getSchemaTpl('layout:inset', { mode: 'vertical' }), - getSchemaTpl('layout:originPosition'), getSchemaTpl('layout:z-index'), getSchemaTpl('layout:flexDirection', { name: 'direction' @@ -141,6 +141,7 @@ export class FlexPluginBase extends BasePlugin { !isFlexItem ? getSchemaTpl('layout:margin-center') : null ] }, + getSchemaTpl('status'), { title: '子节点管理', body: [ @@ -202,20 +203,22 @@ export class FlexPluginBase extends BasePlugin { const parent = store.getSchemaParentById(id); const draggableContainer = this.manager.draggableContainer(id); const isFlexItem = this.manager?.isFlexItem(id); + const isFlexColumnItem = this.manager?.isFlexColumnItem(id); const newColumnSchema = defaultFlexColumnSchema('新的一列'); if ( parent && (info.renderer?.name === 'flex' || info.renderer?.name === 'container') && + !isFlexItem && // 备注：如果是列级元素就不需要显示了 !draggableContainer ) { // 非特殊布局元素（fixed、absolute）支持前后插入追加布局元素功能icon toolbars.push( { iconSvg: 'add-btn', - tooltip: '向前插入布局容器', + tooltip: '上方插入布局容器', level: 'special', - placement: 'bottom', + placement: 'right', className: 'ae-InsertBefore is-vertical', onClick: () => this.manager.appendSiblingSchema( @@ -226,9 +229,9 @@ export class FlexPluginBase extends BasePlugin { }, { iconSvg: 'add-btn', - tooltip: '向后插入布局容器', + tooltip: '下方插入布局容器', level: 'special', - placement: 'bottom', + placement: 'right', className: 'ae-InsertAfter is-vertical', onClick: () => this.manager.appendSiblingSchema( @@ -259,19 +262,19 @@ export class FlexPluginBase extends BasePlugin { toolbars.push( { iconSvg: 'add-btn', - tooltip: '左侧（上侧）插入列级容器', + tooltip: `${isFlexColumnItem ? '上方' : '左侧'}插入列级容器`, level: 'special', placement: 'right', - className: 'ae-InsertBefore', + className: isFlexColumnItem ? 'ae-InsertBefore is-vertical' : 'ae-InsertBefore', onClick: () => this.manager.appendSiblingSchema(newColumnSchema, true, true) }, { iconSvg: 'add-btn', - tooltip: '右侧（下侧）插入列级容器', + tooltip: `${isFlexColumnItem ? '下方' : '右侧'}插入列级容器`, level: 'special', - placement: 'left', - className: 'ae-InsertAfter', + placement: isFlexColumnItem ? 'right' : 'left', + className: isFlexColumnItem ? 'ae-InsertAfter is-vertical' : 'ae-InsertAfter', onClick: () => this.manager.appendSiblingSchema(newColumnSchema, false, true) } diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index d17e665d2..d0050b379 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -58,6 +58,7 @@ export class WrapperPlugin extends BasePlugin { visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', }) : null, getSchemaTpl('layout:position'), + getSchemaTpl('layout:originPosition'), getSchemaTpl('layout:inset', { mode: 'vertical' }), @@ -131,6 +132,7 @@ export class WrapperPlugin extends BasePlugin { } ] }, + getSchemaTpl('status'), { title: '子节点管理', body: [ diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index ea772943c..a3b544257 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -882,7 +882,7 @@ setSchemaTpl( (config?: { label?: string; name?: string; - value?: string, + value?: string; visibleOn?: string; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; From 6cc39ea8bb6a119cef0f0bd3b85297c28a7b0407 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Fri, 11 Nov 2022 10:15:30 +0800 Subject: [PATCH 30/40] =?UTF-8?q?fix(amis-saas-7819):=20=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=8C=E5=B9=B6=E7=AE=80=E5=8C=96=E5=89=8D?= =?UTF-8?q?=E5=90=8E=E7=A7=BB=E5=8A=A8=E5=88=A4=E6=96=AD=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I4633d53238eb6a673140d04b0007bca60d9d1a61 --- packages/amis-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 0b2d20825..bda18ed18 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1", + "version": "5.2.1-layout.1", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", From de0cceddc7899eb0d7f7ebfa606f30fef5c0ec55 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 11:44:34 +0800 Subject: [PATCH 31/40] =?UTF-8?q?fix(amis-saas-4371):=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=9B=B8=E5=85=B3=E9=85=8D=E7=BD=AE=E8=81=94?= =?UTF-8?q?=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Ib155fc0d215b98a0ab1e8ffc8ec7c3278a402f1f --- packages/amis-editor/package.json | 2 +- packages/amis-editor/src/index.tsx | 6 + packages/amis-editor/src/plugin/Container.tsx | 67 ++-- .../src/plugin/Layout/FlexPluginBase.tsx | 70 +++- .../src/plugin/Layout/Layout1_2_v4.tsx | 110 ++++++ .../src/plugin/Layout/Layout_fixed.tsx | 29 ++ .../src/plugin/Layout/Layout_fixed_bottom.tsx | 76 ++++ .../src/plugin/Layout/Layout_fixed_top.tsx | 66 ++++ .../src/plugin/Layout/Layout_scroll_x.tsx | 146 ++++++++ .../src/plugin/Layout/Layout_scroll_y.tsx | 130 +++++++ packages/amis-editor/src/plugin/Wrapper.tsx | 59 +++- packages/amis-editor/src/tpl/layout.tsx | 327 +++++++++--------- 12 files changed, 876 insertions(+), 212 deletions(-) create mode 100644 packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index bda18ed18..c77abc33f 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-layout.1", + "version": "5.2.1-layout.2", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index d12fa0b44..efc3d22fc 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -138,6 +138,12 @@ import './plugin/CodeView'; import './plugin/WebComponent'; import './plugin/CRUD2'; import './plugin/ColumnToggler'; +import './plugin/Layout/Layout_fixed_bottom'; +import './plugin/Layout/Layout_fixed_top'; +import './plugin/Layout/Layout_fixed'; +import './plugin/Layout/Layout_scroll_x'; +import './plugin/Layout/Layout_scroll_y'; +import './plugin/Layout/Layout1_2_v4'; import {GridPlugin} from './plugin/Grid'; diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index af2fac168..f0b0691e3 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -40,6 +40,7 @@ export class ContainerPlugin extends BasePlugin { curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; const isFlexItem = this.manager?.isFlexItem(context?.id); + const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id); return getSchemaTpl('tabs', [ { @@ -79,6 +80,7 @@ export class ContainerPlugin extends BasePlugin { title: '布局', body: [ isFlexItem ? getSchemaTpl('layout:flex', { + isFlexColumnItem, visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', }) : null, isFlexItem ? getSchemaTpl('layout:flex-grow', { @@ -98,35 +100,60 @@ export class ContainerPlugin extends BasePlugin { getSchemaTpl('layout:flexDirection', { visibleOn: 'data.style && data.style.display === "flex"', }), + getSchemaTpl('layout:justifyContent', { - visibleOn: 'data.style && data.style.display === "flex"', - label: tipedLabel( - `${isRowContent ? '水平' : '垂直'}对齐方式`, - '设置子元素在主轴上的对齐方式' - ) + label: '水平对齐方式', + visibleOn: 'data.style && data.style.display === "flex" && data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse"' + }), + getSchemaTpl('layout:justifyContent', { + label: '垂直对齐方式', + visibleOn: 'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")' }), getSchemaTpl('layout:alignItems', { - visibleOn: 'data.style && data.style.display === "flex"', - label: tipedLabel( - `${isRowContent ? '垂直' : '水平'}对齐方式`, - '设置子元素在交叉轴上的对齐方式' - ) + label: '水平对齐方式', + visibleOn: 'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")' }), + getSchemaTpl('layout:alignItems', { + label: '垂直对齐方式', + visibleOn: 'data.style && data.style.display === "flex" && (data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse")' + }), + getSchemaTpl('layout:flex-wrap', { visibleOn: 'data.style && data.style.display === "flex"', }), - getSchemaTpl('layout:isFixedHeight'), - getSchemaTpl('layout:height'), - getSchemaTpl('layout:max-height'), - getSchemaTpl('layout:min-height'), - getSchemaTpl('layout:overflow-y'), + getSchemaTpl('layout:isFixedHeight', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:max-height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:min-height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:overflow-y', { + visibleOn: `${!isFlexItem || !isFlexColumnItem} && (data.isFixedHeight || data.style && data.style.maxHeight) || (${isFlexItem && isFlexColumnItem} && data.style.flex === '0 0 auto')`, + }), + + getSchemaTpl('layout:isFixedWidth', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:max-width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:min-width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:overflow-x', { + visibleOn: `${!isFlexItem || isFlexColumnItem} && (data.isFixedWidth || data.style && data.style.maxWidth) || (${isFlexItem && !isFlexColumnItem} && data.style.flex === '0 0 auto')`, + }), - getSchemaTpl('layout:isFixedWidth'), - getSchemaTpl('layout:width'), - getSchemaTpl('layout:max-width'), - getSchemaTpl('layout:min-width'), - getSchemaTpl('layout:overflow-x'), !isFlexItem ? getSchemaTpl('layout:margin-center') : null, ] }, diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 520f1c1db..312b1caba 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -50,13 +50,14 @@ export class FlexPluginBase extends BasePlugin { disabledRendererPlugin = false; name = '布局容器'; + order = -1200; isBaseComponent = true; icon = 'fa fa-columns'; pluginIcon = 'flex-container-plugin'; description = '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; docLink = '/amis/zh-CN/components/flex'; - tags = ['容器']; + tags = ['常见布局']; scaffold: any = defaultFlexContainerSchema; previewSchema = { ...this.scaffold @@ -72,6 +73,7 @@ export class FlexPluginBase extends BasePlugin { curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; const isFlexItem = this.manager?.isFlexItem(context?.id); + const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id); return [ getSchemaTpl('tabs', [ @@ -85,6 +87,7 @@ export class FlexPluginBase extends BasePlugin { body: [ isFlexItem ? getSchemaTpl('layout:flex', { + isFlexColumnItem, visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")' }) @@ -97,6 +100,7 @@ export class FlexPluginBase extends BasePlugin { : null, isFlexItem ? getSchemaTpl('layout:flex-basis', { + label: isFlexColumnItem ? '默认高度' : '默认宽度', visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")' }) @@ -110,33 +114,61 @@ export class FlexPluginBase extends BasePlugin { getSchemaTpl('layout:flexDirection', { name: 'direction' }), + getSchemaTpl('layout:justifyContent', { name: 'justify', - label: tipedLabel( - `${isRowContent ? '水平' : '垂直'}对齐方式`, - '设置子元素在主轴上的对齐方式' - ) + label: '水平对齐方式', + visibleOn: 'data.direction === "row" || data.direction === "row-reverse"' + }), + // 备注: 重复一个是为了能实时联动，后续需要amis优化，支持label使用公式表达式 + getSchemaTpl('layout:justifyContent', { + name: 'justify', + label: '垂直对齐方式', + visibleOn: 'data.direction === "column" || data.direction === "column-reverse"' }), getSchemaTpl('layout:alignItems', { name: 'alignItems', - label: tipedLabel( - `${isRowContent ? '垂直' : '水平'}对齐方式`, - '设置子元素在交叉轴上的对齐方式' - ) + label: '水平对齐方式', + visibleOn: 'data.direction === "column" || data.direction === "column-reverse"' + }), + getSchemaTpl('layout:alignItems', { + name: 'alignItems', + label: '垂直对齐方式', + visibleOn: 'data.direction === "row" || data.direction === "row-reverse"' }), getSchemaTpl('layout:flex-wrap'), - getSchemaTpl('layout:isFixedHeight'), - getSchemaTpl('layout:height'), - getSchemaTpl('layout:max-height'), - getSchemaTpl('layout:min-height'), - getSchemaTpl('layout:overflow-y'), + getSchemaTpl('layout:isFixedHeight', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:max-height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:min-height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:overflow-y', { + visibleOn: `${!isFlexItem || !isFlexColumnItem} && (data.isFixedHeight || data.style && data.style.maxHeight) || (${isFlexItem && isFlexColumnItem} && data.style.flex === '0 0 auto')`, + }), - getSchemaTpl('layout:isFixedWidth'), - getSchemaTpl('layout:width'), - getSchemaTpl('layout:max-width'), - getSchemaTpl('layout:min-width'), - getSchemaTpl('layout:overflow-x'), + getSchemaTpl('layout:isFixedWidth', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:max-width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:min-width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:overflow-x', { + visibleOn: `${!isFlexItem || isFlexColumnItem} && (data.isFixedWidth || data.style && data.style.maxWidth) || (${isFlexItem && !isFlexColumnItem} && data.style.flex === '0 0 auto')`, + }), !isFlexItem ? getSchemaTpl('layout:margin-center') : null ] diff --git a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx new file mode 100644 index 000000000..dbf866c33 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx @@ -0,0 +1,110 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export default class Layout1_2_v4 extends FlexPluginBase { + name = '经典布局'; + isBaseComponent = true; + pluginIcon = 'layout-3-1-plugin'; + description = '常见布局：经典布局（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 307; + scaffold: any = { + type: 'flex', + className: 'p-1', + items: [ + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'flex', + items: [ + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '250px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'flex', + items: [ + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block' + } + } + ], + style: { + position: 'static', + overflowX: 'auto', + overflowY: 'auto', + margin: '0', + flex: '1 1 auto', + flexGrow: 1, + flexBasis: 'auto' + }, + alignItems: 'stretch', + direction: 'column', + justify: 'center', + isFixedHeight: false, + isFixedWidth: false + } + ], + style: { + flex: '1 1 auto', + overflowX: 'auto', + margin: '0', + maxWidth: 'auto', + overflowY: 'auto', + position: 'static', + minWidth: 'auto', + width: 'auto', + maxHeight: 'auto', + minHeight: '300px' + }, + direction: 'row', + justify: 'flex-start', + alignItems: 'stretch', + isFixedHeight: false, + isFixedWidth: false + } + ], + direction: 'column', + justify: 'center', + alignItems: 'stretch' + }; +} + +registerEditorPlugin(Layout1_2_v4); \ No newline at end of file diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx new file mode 100644 index 000000000..c490fc376 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx @@ -0,0 +1,29 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export default class Layout_fixed extends FlexPluginBase { + name = '悬浮容器'; + isBaseComponent = true; + pluginIcon = 'layout-fixed-plugin'; + description = '常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 503; + scaffold: any = { + type: 'wrapper', + size: 'xs', + body: [], + style: { + position: 'fixed', + inset: 'auto 50px 50px auto', + zIndex: 10, + display: 'flex', + minWidth: '80px', + minHeight: '80px', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }; +} + +registerEditorPlugin(Layout_fixed); \ No newline at end of file diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx new file mode 100644 index 000000000..f7af09412 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx @@ -0,0 +1,76 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export default class Layout_fixed_bottom extends FlexPluginBase { + name = '吸底容器'; + isBaseComponent = true; + pluginIcon = 'flex-container-plugin'; + description = '常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 501; + scaffold: any = { + type: 'flex', + className: 'p-1', + items: [ + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch' + } + } + ], + style: { + position: 'fixed', + inset: 'auto auto 0 0', + zIndex: 2, + width: '100%', + overflowX: 'auto', + margin: '0', + overflowY: 'auto', + height: 'auto' + }, + isFixedWidth: true, + direction: 'row', + justify: 'center', + alignItems: 'stretch', + isFixedHeight: false + }; +} + +registerEditorPlugin(Layout_fixed_bottom); \ No newline at end of file diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx new file mode 100644 index 000000000..b114b59c2 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx @@ -0,0 +1,66 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export default class Layout_fixed_top extends FlexPluginBase { + name = '吸顶容器'; + isBaseComponent = true; + pluginIcon = 'flex-container-plugin'; + description = '常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 502; + scaffold: any = { + type: 'flex', + className: 'p-1', + items: [ + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '1 1 auto', + flexBasis: 'auto', + flexGrow: 1, + display: 'block' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '1 1 auto', + display: 'block', + flexBasis: 'auto', + flexGrow: 1 + } + } + ], + style: { + position: 'fixed', + inset: '0 auto auto 0', + zIndex: 10, + width: '100%', + overflowX: 'auto', + margin: '0', + overflowY: 'auto' + }, + isFixedWidth: true, + direction: 'row', + justify: 'center', + alignItems: 'stretch', + isFixedHeight: false + }; +} + +registerEditorPlugin(Layout_fixed_top); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx new file mode 100644 index 000000000..c6e4f2837 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx @@ -0,0 +1,146 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export default class Layout_scroll_x extends FlexPluginBase { + name = 'x轴滚动容器'; + isBaseComponent = true; + pluginIcon = 'layout-3cols-plugin'; + description = '常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 505; + scaffold: any = { + type: 'flex', + className: 'p-1', + items: [ + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '200px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '200px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto', + flexBasis: '200px' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '200px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '200px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '200px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '200px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + } + ], + direction: 'row', + justify: 'flex-start', + alignItems: 'stretch', + style: { + position: 'static', + minHeight: 'auto', + maxWidth: '1080px', + minWidth: 'auto', + height: '200px', + overflowX: 'scroll', + overflowY: 'scroll', + margin: '0 auto' + }, + isFixedHeight: true, + isFixedWidth: false + }; +} + +registerEditorPlugin(Layout_scroll_x); \ No newline at end of file diff --git a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx new file mode 100644 index 000000000..3e96025d1 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx @@ -0,0 +1,130 @@ +import {registerEditorPlugin} from 'amis-editor-core'; +import {FlexPluginBase} from './FlexPluginBase'; + +export default class Layout_scroll_y extends FlexPluginBase { + name = 'y轴滚动容器'; + isBaseComponent = true; + pluginIcon = 'layout-3row-plugin'; + description = '常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。'; + tags = ['常见布局']; + order = 504; + scaffold: any = { + type: 'flex', + className: 'p-1', + items: [ + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '60px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '60px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '60px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '60px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '60px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + }, + { + type: 'wrapper', + size: 'xs', + body: [], + style: { + flex: '0 0 auto', + flexBasis: '60px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + position: 'static', + minWidth: 'auto', + minHeight: 'auto' + } + } + ], + direction: 'column', + justify: 'flex-start', + alignItems: 'stretch', + style: { + position: 'static', + minHeight: 'auto', + maxWidth: 'auto', + minWidth: 'auto', + height: '200px', + width: 'auto', + overflowX: 'auto', + overflowY: 'scroll', + margin: '0' + }, + isFixedHeight: true, + isFixedWidth: false + }; +} + +registerEditorPlugin(Layout_scroll_y); \ No newline at end of file diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index d0050b379..18ca1c766 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -37,6 +37,7 @@ export class WrapperPlugin extends BasePlugin { panelBodyCreator = (context: BaseEventContext) => { const curRendererSchema = context?.schema; const isFlexItem = this.manager?.isFlexItem(context?.id); + const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id); return [ getSchemaTpl('tabs', [ @@ -49,12 +50,14 @@ export class WrapperPlugin extends BasePlugin { title: '布局', body: [ isFlexItem ? getSchemaTpl('layout:flex', { + isFlexColumnItem, visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', }) : null, isFlexItem ? getSchemaTpl('layout:flex-grow', { visibleOn: 'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")', }) : null, isFlexItem ? getSchemaTpl('layout:flex-basis', { + label: isFlexColumnItem ? '默认高度' : '默认宽度', visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")', }) : null, getSchemaTpl('layout:position'), @@ -67,27 +70,59 @@ export class WrapperPlugin extends BasePlugin { getSchemaTpl('layout:flexDirection', { visibleOn: 'data.style && data.style.display === "flex"', }), + getSchemaTpl('layout:justifyContent', { - visibleOn: 'data.style && data.style.display === "flex"', + label: '水平对齐方式', + visibleOn: 'data.style && data.style.display === "flex" && data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse"' + }), + getSchemaTpl('layout:justifyContent', { + label: '垂直对齐方式', + visibleOn: 'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")' }), getSchemaTpl('layout:alignItems', { - visibleOn: 'data.style && data.style.display === "flex"', + label: '水平对齐方式', + visibleOn: 'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")' }), + getSchemaTpl('layout:alignItems', { + label: '垂直对齐方式', + visibleOn: 'data.style && data.style.display === "flex" && (data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse")' + }), + getSchemaTpl('layout:flex-wrap', { visibleOn: 'data.style && data.style.display === "flex"', }), - getSchemaTpl('layout:isFixedHeight'), - getSchemaTpl('layout:height'), - getSchemaTpl('layout:max-height'), - getSchemaTpl('layout:min-height'), - getSchemaTpl('layout:overflow-y'), + getSchemaTpl('layout:isFixedHeight', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:max-height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:min-height', { + visibleOn: `${!isFlexItem || !isFlexColumnItem}` + }), + getSchemaTpl('layout:overflow-y', { + visibleOn: `${!isFlexItem || !isFlexColumnItem} && (data.isFixedHeight || data.style && data.style.maxHeight) || (${isFlexItem && isFlexColumnItem} && data.style.flex === '0 0 auto')`, + }), - getSchemaTpl('layout:isFixedWidth'), - getSchemaTpl('layout:width'), - getSchemaTpl('layout:max-width'), - getSchemaTpl('layout:min-width'), - getSchemaTpl('layout:overflow-x'), + getSchemaTpl('layout:isFixedWidth', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:max-width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:min-width', { + visibleOn: `${!isFlexItem || isFlexColumnItem}` + }), + getSchemaTpl('layout:overflow-x', { + visibleOn: `${!isFlexItem || isFlexColumnItem} && (data.isFixedWidth || data.style && data.style.maxWidth) || (${isFlexItem && !isFlexColumnItem} && data.style.flex === '0 0 auto')`, + }), !isFlexItem ? getSchemaTpl('layout:margin-center') : null, ] diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index a3b544257..647a442e7 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -506,28 +506,35 @@ setSchemaTpl( name?: string; value?: string, visibleOn?: string; + isFlexColumnItem?: boolean; }) => { return { type: 'switch', - label: config?.label || tipedLabel('弹性模式', '设置为弹性模式后，自动适配当前所在区域'), + label: config?.label || tipedLabel('弹性模式', '开启弹性模式后，自动适配当前所在区域'), name: config?.name || 'style.flex', value: config?.value || '0 0 auto', trueValue: '1 1 auto', falseValue: '0 0 auto', - onText: "弹性宽度", - offText: "固定宽度", + onText: "开启", + offText: "关闭", inputClassName: 'inline-flex justify-between', visibleOn: config?.visibleOn, onChange: (value: any, oldValue: boolean, model: any, form: any) => { if (!value || value === '0 0 auto') { - // 固定宽度模式下，剔除默认宽度和占比设置 + // 固定宽度模式下，剔除占比设置 form.setValueByName('style.flexGrow', undefined); } + // 重置overflow数值 + if (config?.isFlexColumnItem) { + form.setValueByName('style.overflowY', 'auto'); + } else { + form.setValueByName('style.overflowX', 'auto'); + } }, }; }); -// flex-basis默认宽度设置 +// flex-basis设置 setSchemaTpl( 'layout:flex-basis', (config?: { @@ -541,7 +548,7 @@ setSchemaTpl( }) => { return { type: 'input-number', - label: config?.label || tipedLabel('默认宽度', '在分配多余空间之前，其默认占据的主轴空间（main size）'), + label: tipedLabel(config?.label || '默认宽度', '在分配多余空间之前，其默认占据的主轴空间（main size）'), name: config?.name || 'style.flexBasis', value: config?.value || 'auto', visibleOn: config?.visibleOn, @@ -576,6 +583,156 @@ setSchemaTpl( }; }); +// 是否固定宽度: isFixedWidth 配置: +setSchemaTpl( + 'layout:isFixedWidth', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'switch', + label: config?.label || '固定宽度', + name: config?.name || 'isFixedWidth', + value: config?.value || false, + visibleOn: config?.visibleOn, + inputClassName: 'inline-flex justify-between', + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { + if (value) { + // 固定宽度时，剔除最大宽度、最小宽度 + form.setValueByName('style.maxWidth', undefined); + form.setValueByName('style.minWidth', undefined); + } else { + // 非固定宽度时，剔除宽度数值 + form.setValueByName('style.width', undefined); + } + }, + }; +}); + +// 宽度设置 +setSchemaTpl( + 'layout:width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || '宽度', + name: config?.name || 'style.width', + value: config?.value || '300px', + visibleOn: config?.visibleOn ? `${config?.visibleOn} && data.isFixedWidth` : 'data.isFixedWidth', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 最大宽度设置 +setSchemaTpl( + 'layout:max-width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最大的水平展示区域'), + name: config?.name || 'style.maxWidth', + value: config?.value, + min: '${style.minWidth | toInt}', + visibleOn: config?.visibleOn ? `${config?.visibleOn} && !data.isFixedWidth` : '!data.isFixedWidth', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// 最小宽度设置 +setSchemaTpl( + 'layout:min-width', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + unitOptions?: Array; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'input-number', + label: config?.label || tipedLabel('最小宽度', '最小宽度即当前元素最小的水平展示区域'), + name: config?.name || 'style.minWidth', + value: config?.value, + max: '${style.maxWidth | toInt}', + visibleOn: config?.visibleOn ? `${config?.visibleOn} && !data.isFixedWidth` : '!data.isFixedWidth', + clearable: true, + unitOptions: config?.unitOptions ?? LayoutUnitOptions, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + }; +}); + +// x轴（水平轴）滚动模式 +setSchemaTpl( + 'layout:overflow-x', + (config?: { + label?: string; + name?: string; + value?: string, + visibleOn?: string; + pipeIn?: (value: any, data: any) => void; + pipeOut?: (value: any, data: any) => void; + }) => { + return { + type: 'select', + label: config?.label || tipedLabel(' x轴滚动模式', '用于设置水平方向的滚动模式'), + name: config?.name || 'style.overflowX', + value: config?.value || 'auto', + visibleOn: config?.visibleOn, + pipeIn: config?.pipeIn, + pipeOut: config?.pipeOut, + options: [ + { + label: '超出显示', + value: 'visible' + }, + { + label: '超出隐藏', + value: 'hidden' + }, + { + label: '滚动显示', + value: 'scroll' + }, + { + label: '自动适配', + value: 'auto' + }, + ] + }; +}); + // 是否固定高度: isFixedHeight 配置: setSchemaTpl( 'layout:isFixedHeight', @@ -609,156 +766,6 @@ setSchemaTpl( }; }); -// 宽度设置 -setSchemaTpl( - 'layout:width', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || '宽度', - name: config?.name || 'style.width', - value: config?.value || '300px', - visibleOn: config?.visibleOn ?? 'data.isFixedWidth', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - }; -}); - -// x轴（水平轴）滚动模式 -setSchemaTpl( - 'layout:overflow-x', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'select', - label: config?.label || tipedLabel(' x轴滚动模式', '用于设置水平方向的滚动模式'), - name: config?.name || 'style.overflowX', - value: config?.value || 'auto', - visibleOn: config?.visibleOn ?? 'data.isFixedWidth || data.style && data.style.maxWidth', - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - options: [ - { - label: '超出显示', - value: 'visible' - }, - { - label: '超出隐藏', - value: 'hidden' - }, - { - label: '滚动显示', - value: 'scroll' - }, - { - label: '自动适配', - value: 'auto' - }, - ] - }; -}); - -// 最大宽度设置 -setSchemaTpl( - 'layout:max-width', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || tipedLabel('最大宽度', '最大宽度即当前元素最大的水平展示区域'), - name: config?.name || 'style.maxWidth', - value: config?.value, - min: '${style.minWidth | toInt}', - visibleOn: config?.visibleOn ?? '!data.isFixedWidth', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - }; -}); - -// 最小宽度设置 -setSchemaTpl( - 'layout:min-width', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - unitOptions?: Array; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'input-number', - label: config?.label || tipedLabel('最小宽度', '最小宽度即当前元素最小的水平展示区域'), - name: config?.name || 'style.minWidth', - value: config?.value, - max: '${style.maxWidth | toInt}', - visibleOn: config?.visibleOn ?? '!data.isFixedWidth', - clearable: true, - unitOptions: config?.unitOptions ?? LayoutUnitOptions, - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - }; -}); - -// 是否固定高度: isFixedWidth 配置: -setSchemaTpl( - 'layout:isFixedWidth', - (config?: { - label?: string; - name?: string; - value?: string, - visibleOn?: string; - pipeIn?: (value: any, data: any) => void; - pipeOut?: (value: any, data: any) => void; - }) => { - return { - type: 'switch', - label: config?.label || '固定宽度', - name: config?.name || 'isFixedWidth', - value: config?.value || false, - visibleOn: config?.visibleOn, - inputClassName: 'inline-flex justify-between', - pipeIn: config?.pipeIn, - pipeOut: config?.pipeOut, - onChange: (value: boolean, oldValue: boolean, model: any, form: any) => { - if (value) { - // 固定宽度时，剔除最大宽度、最小宽度 - form.setValueByName('style.maxWidth', undefined); - form.setValueByName('style.minWidth', undefined); - } else { - // 非固定宽度时，剔除宽度数值 - form.setValueByName('style.width', undefined); - } - }, - }; -}); - // 高度设置 setSchemaTpl( 'layout:height', @@ -776,7 +783,7 @@ setSchemaTpl( label: config?.label || '高度', name: config?.name || 'style.height', value: config?.value || '300px', - visibleOn: config?.visibleOn ?? 'data.isFixedHeight', + visibleOn: config?.visibleOn ? `${config?.visibleOn} && data.isFixedHeight` : 'data.isFixedHeight', clearable: true, unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, @@ -802,7 +809,7 @@ setSchemaTpl( name: config?.name || 'style.maxHeight', value: config?.value, min: '${style.minHeight | toInt}', - visibleOn: config?.visibleOn ?? '!data.isFixedHeight', + visibleOn: config?.visibleOn ? `${config?.visibleOn} && !data.isFixedHeight` : '!data.isFixedHeight', clearable: true, unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, @@ -828,7 +835,7 @@ setSchemaTpl( name: config?.name || 'style.minHeight', value: config?.value, max: '${style.maxHeight | toInt}', - visibleOn: config?.visibleOn ?? '!data.isFixedHeight', + visibleOn: config?.visibleOn ? `${config?.visibleOn} && !data.isFixedHeight` : '!data.isFixedHeight', clearable: true, unitOptions: config?.unitOptions ?? LayoutUnitOptions, pipeIn: config?.pipeIn, @@ -852,7 +859,7 @@ setSchemaTpl( label: config?.label || tipedLabel(' y轴滚动模式', '用于设置垂直方向的滚动模式'), name: config?.name || 'style.overflowY', value: config?.value || 'auto', - visibleOn: config?.visibleOn ?? 'data.isFixedHeight || data.style && data.style.maxHeight', + visibleOn: config?.visibleOn, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, options: [ From aca1051104f603fc3285d153c8ed490a558493a5 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 11:52:21 +0800 Subject: [PATCH 32/40] =?UTF-8?q?fix(amis-saas-4371):=20=E8=A1=A5=E5=85=85?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=9B=B8=E5=85=B3=E5=9B=BD=E9=99=85=E5=8C=96?= =?UTF-8?q?=E8=AF=AD=E6=96=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Idca195655e90656b37faf74ee21b735607463cb3 --- packages/amis-editor/package.json | 2 +- packages/amis-editor/src/locale/en-US.ts | 24 +++++++++++++++++++++++- packages/amis-editor/src/locale/zh-CN.ts | 23 ++++++++++++++++++++++- 3 files changed, 46 insertions(+), 3 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index c77abc33f..7c7d6c5f3 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-layout.2", + "version": "5.2.1-layout.3", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-editor/src/locale/en-US.ts b/packages/amis-editor/src/locale/en-US.ts index a59277047..87880edab 100644 --- a/packages/amis-editor/src/locale/en-US.ts +++ b/packages/amis-editor/src/locale/en-US.ts @@ -3419,5 +3419,27 @@ extendLocale('en-US', { '5b5765b3fd7e72e04a5cd3e2ef6218a4': 'Insert Layout Container Below', 'ee466872b9a43e720e296813dbc5adee': '{{@1}} Insert Column Level Container', '14c495b1248756310c75396cd41f4fe9': 'upper', - 'e33ac3a4c1a95a02a18f1555038804da': 'Below' + 'e33ac3a4c1a95a02a18f1555038804da': 'Below', + 'e731c52010266b8ade1e7e78e25cdccc': 'Common layouts', + 'f80bd0a5546465336f4f9cafdfa8b67f': 'Default Height', + 'ba9ccf1040d7abd0848046330ba3558c': 'Classic layout', + '230d65546ea0d299907943403608233c': + 'Common layout: classic layout (layout container based on CSS Flex implementation).', + '9bbb7cfaeb34a2b5c095ac253355f028': 'Levitation vessel', + 'a3e91631c1a3a43e09526ea7f6b8595c': + 'Common layout: suspended container (layout container based on CSS Flex implementation).', + 'd423930b823fc45f08c18922b19e4e9e': 'Bottom suction vessel', + 'b8b4eb373d8ba6f98271b681fba2511d': + 'Common layout: bottom suction container (a layout container based on CSS Flex implementation).', + 'faaa6444a709917ff33e0d58948504dc': 'Ceiling container', + '1facf0bd0f56c66759857345e7434443': + 'Common layout: ceiling container (a layout container based on CSS Flex implementation).', + 'f416a3a2566dda04bc0ef67027e6f460': 'X axis rolling container', + 'e3d9ad8453925764f2918dbfd6ff824e': + 'Common layout: x-axis rolling container (based on the layout container implemented by CSS Flex).', + '053e0cbf18c8fe59b928d52fcd556b88': 'Y-axis rolling container', + 'c9f089cefc06c217c6dddfe2fc772ea3': + 'Common layout: y-axis rolling container (a layout container based on CSS Flex implementation).', + '3587540660a01f8a8aff6a2c0409a404': + 'After the elastic mode is turned on, the current area is automatically adapted' }); diff --git a/packages/amis-editor/src/locale/zh-CN.ts b/packages/amis-editor/src/locale/zh-CN.ts index 4f9670d52..d921d32ba 100644 --- a/packages/amis-editor/src/locale/zh-CN.ts +++ b/packages/amis-editor/src/locale/zh-CN.ts @@ -3022,5 +3022,26 @@ extendLocale('zh-CN', { '5b5765b3fd7e72e04a5cd3e2ef6218a4': '下方插入布局容器', 'ee466872b9a43e720e296813dbc5adee': '{{@1}}插入列级容器', '14c495b1248756310c75396cd41f4fe9': '上方', - 'e33ac3a4c1a95a02a18f1555038804da': '下方' + 'e33ac3a4c1a95a02a18f1555038804da': '下方', + 'e731c52010266b8ade1e7e78e25cdccc': '常见布局', + 'f80bd0a5546465336f4f9cafdfa8b67f': '默认高度', + 'ba9ccf1040d7abd0848046330ba3558c': '经典布局', + '230d65546ea0d299907943403608233c': + '常见布局：经典布局（基于 CSS Flex 实现的布局容器）。', + '9bbb7cfaeb34a2b5c095ac253355f028': '悬浮容器', + 'a3e91631c1a3a43e09526ea7f6b8595c': + '常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。', + 'd423930b823fc45f08c18922b19e4e9e': '吸底容器', + 'b8b4eb373d8ba6f98271b681fba2511d': + '常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。', + 'faaa6444a709917ff33e0d58948504dc': '吸顶容器', + '1facf0bd0f56c66759857345e7434443': + '常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。', + 'f416a3a2566dda04bc0ef67027e6f460': 'x轴滚动容器', + 'e3d9ad8453925764f2918dbfd6ff824e': + '常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。', + '053e0cbf18c8fe59b928d52fcd556b88': 'y轴滚动容器', + 'c9f089cefc06c217c6dddfe2fc772ea3': + '常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。', + '3587540660a01f8a8aff6a2c0409a404': '开启弹性模式后，自动适配当前所在区域' }); From 78aad3c37d9c41e5f18be8be2c615f60aaf2537c Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 12:16:57 +0800 Subject: [PATCH 33/40] =?UTF-8?q?fix(amis-saas-4371):=20=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I71f489635b94740cbd2c23afe41104c9c2f06d22 --- packages/amis-editor/package.json | 2 +- packages/amis-editor/src/tpl/layout.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 7c7d6c5f3..4ad0db4b5 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-layout.3", + "version": "5.2.1-layout.5", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 647a442e7..c3efe660c 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -524,11 +524,12 @@ setSchemaTpl( // 固定宽度模式下，剔除占比设置 form.setValueByName('style.flexGrow', undefined); } - // 重置overflow数值 if (config?.isFlexColumnItem) { form.setValueByName('style.overflowY', 'auto'); + form.setValueByName('style.height', undefined); } else { form.setValueByName('style.overflowX', 'auto'); + form.setValueByName('style.width', undefined); } }, }; From 0790058ea9c3ae47113f3ca2e866318b8773fd6e Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 13:09:07 +0800 Subject: [PATCH 34/40] =?UTF-8?q?fix(amis-saas-4371):=20=E5=89=94=E9=99=A4?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=AE=B9=E5=99=A8=E4=B8=AD=E5=A4=96=E8=A7=82?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=9D=A2=E6=9D=BF=E4=B8=AD=E7=9A=84=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I2c284de8c4c2de395f5e876a990d12426807d345 --- packages/amis-editor/src/plugin/Container.tsx | 5 ++--- packages/amis-editor/src/plugin/Wrapper.tsx | 2 +- packages/amis-editor/src/tpl/layout.tsx | 4 ++-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index f0b0691e3..35845b81d 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -164,7 +164,7 @@ export class ContainerPlugin extends BasePlugin { title: '外观', className: 'p-none', body: getSchemaTpl('collapseGroup', [ - ...getSchemaTpl('style:common', [], ['layout']), + ...getSchemaTpl('style:common', ['layout']), getSchemaTpl('style:classNames', { isFormItem: false, schema: [ @@ -173,8 +173,7 @@ export class ContainerPlugin extends BasePlugin { label: '内容区' }) ] - }), - ...getSchemaTpl('style:common', ['layout']), + }) ]) } ]); diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index 18ca1c766..eb1fb336d 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -199,7 +199,7 @@ export class WrapperPlugin extends BasePlugin { title: '外观', className: 'p-none', body: getSchemaTpl('collapseGroup', [ - ...getSchemaTpl('style:common'), + ...getSchemaTpl('style:common', ['layout']), { title: 'CSS 类名', body: [ diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index c3efe660c..cc6ef1d58 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -193,7 +193,7 @@ setSchemaTpl( } }); -// 展示模式 +// 显示类型 setSchemaTpl( 'layout:display', (config?: { @@ -207,7 +207,7 @@ setSchemaTpl( }) => { const configSchema = { type: 'select', - label: config?.label || tipedLabel('展示模式', '默认为块级，可设置为弹性布局模式（flex布局容器）'), + label: config?.label || tipedLabel('显示类型', '默认为块级，可设置为弹性布局模式（flex布局容器）'), name: config?.name || 'style.display', value: config?.value || 'block', visibleOn: config?.visibleOn, From 33743c62a81f0d550e01a78bf6ede89e6d273c98 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 13:18:13 +0800 Subject: [PATCH 35/40] =?UTF-8?q?fix(amis-saas-4371):=20=E5=89=94=E9=99=A4?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=AE=B9=E5=99=A8=E4=B8=AD=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E7=9A=84=E8=8A=82=E7=82=B9=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Ic78f07c911c4ba585bb636e4fe88b95d20d83a90 --- .../src/plugin/Layout/FlexPluginBase.tsx | 26 +------------------ packages/amis-editor/src/plugin/Wrapper.tsx | 26 +------------------ 2 files changed, 2 insertions(+), 50 deletions(-) diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 312b1caba..50ee35229 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -173,31 +173,7 @@ export class FlexPluginBase extends BasePlugin { !isFlexItem ? getSchemaTpl('layout:margin-center') : null ] }, - getSchemaTpl('status'), - { - title: '子节点管理', - body: [ - { - name: 'items', - label: false, - type: 'combo', - scaffold: { - type: 'wrapper', - body: '子节点内容' - }, - minLength: 2, - multiple: true, - // draggable: true, - draggableTip: '', - items: [ - { - type: 'tpl', - tpl: '子节点${index | plus}' - } - ] - } - ] - } + getSchemaTpl('status') ]) ] }, diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index eb1fb336d..371be07bc 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -167,31 +167,7 @@ export class WrapperPlugin extends BasePlugin { } ] }, - getSchemaTpl('status'), - { - title: '子节点管理', - body: [ - { - name: 'body', - label: false, - type: 'combo', - scaffold: { - type: 'tpl', - tpl: '子节点', - inline: false - }, - multiple: true, - draggableTip: '', - items: [ - { - type: 'tpl', - tpl: - '子节点${index | plus}' - } - ] - } - ] - } + getSchemaTpl('status') ]) ] }, From 7e230ee7190ed1f396d74502b2bdefffbec28bc4 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 13:23:07 +0800 Subject: [PATCH 36/40] =?UTF-8?q?fix(amis-saas-4371):=20=E5=89=94=E9=99=A4?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=AE=B9=E5=99=A8=E4=B8=AD=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I7a3eaa644cdb5c999b2176391d647d3bd1332920 --- packages/amis-editor/package.json | 2 +- packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 4ad0db4b5..4fc279f0f 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-layout.5", + "version": "5.2.1-layout.6", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 50ee35229..5dbbba39e 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -187,10 +187,6 @@ export class FlexPluginBase extends BasePlugin { body: [getSchemaTpl('className', {label: '外层CSS类名'})] } ]) - }, - { - title: '状态', - body: [getSchemaTpl('visible'), getSchemaTpl('disabled')] } ]) ]; From 0f8c1cc72abd7520394da5c81726a5a434cc6975 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 14:58:48 +0800 Subject: [PATCH 37/40] =?UTF-8?q?fix(amis-saas-4371):=20=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I438b4604437706ffaf16692174f6f9dd2f603d21 --- packages/amis-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 4fc279f0f..1d8a9a243 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-layout.6", + "version": "5.2.1-layout.7", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", From 1c7a82732f75de8c7c8878ab15ebf143a9db422b Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 15:16:51 +0800 Subject: [PATCH 38/40] =?UTF-8?q?fix(amis-saas-4371):=20=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Iad351546904bd4503e6a7feda0d7a2f539e96e12 --- packages/amis-editor/package.json | 2 +- packages/amis-editor/src/tpl/layout.tsx | 14 +------------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 1d8a9a243..27f836c3a 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-layout.7", + "version": "5.2.1-layout.8", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index cc6ef1d58..32626f793 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -372,19 +372,7 @@ setSchemaTpl( { label: '自动拉伸', value: 'stretch' - }, - { - label: '首尾留空', - value: 'space-around' - }, - { - label: '首尾对齐', - value: 'space-between' - }, - { - label: '元素等间距', - value: 'space-evenly' - }, + } ] } From dda816abf4cff41c675b3b672db8d06e9aee5b64 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 15:31:20 +0800 Subject: [PATCH 39/40] =?UTF-8?q?fix(amis-saas-8035):=20=E7=89=B9=E6=AE=8A?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=8F=82=E8=80=83=E4=BD=8D=E7=BD=AE=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E9=BB=98=E8=AE=A4=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I230f57f883d51615f54069b7c30e0ae642d05839 --- packages/amis-editor/package.json | 2 +- packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx | 3 ++- packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx | 3 ++- packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx | 3 ++- packages/amis-editor/src/tpl/layout.tsx | 1 + 5 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 27f836c3a..f34f4894a 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-layout.8", + "version": "5.2.1-layout.9", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx index c490fc376..80b5d960c 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx @@ -22,7 +22,8 @@ export default class Layout_fixed extends FlexPluginBase { flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'stretch' - } + }, + originPosition: 'right-bottom' }; } diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx index f7af09412..9a8315a2e 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx @@ -69,7 +69,8 @@ export default class Layout_fixed_bottom extends FlexPluginBase { direction: 'row', justify: 'center', alignItems: 'stretch', - isFixedHeight: false + isFixedHeight: false, + originPosition: 'right-bottom' }; } diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx index b114b59c2..10c0e3c0b 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx @@ -59,7 +59,8 @@ export default class Layout_fixed_top extends FlexPluginBase { direction: 'row', justify: 'center', alignItems: 'stretch', - isFixedHeight: false + isFixedHeight: false, + originPosition: 'right-bottom' }; } diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 32626f793..e39c19af8 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -925,6 +925,7 @@ setSchemaTpl( pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { + console.log('config:', config); const configSchema = { type: 'select', label: config?.label || tipedLabel('参考位置', '可设置为左上角、右上角、右下角、左下角，默认为右下角'), From 91daa0bd3a1d72ed98f2df47b7a4d27d133763c4 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 14 Nov 2022 16:10:49 +0800 Subject: [PATCH 40/40] =?UTF-8?q?fix(amis-saas-4371):=20=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I769586929fb1ba4a9775bdea7c88ba53ae28b719 --- packages/amis-editor/src/tpl/layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index e39c19af8..32626f793 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -925,7 +925,6 @@ setSchemaTpl( pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { - console.log('config:', config); const configSchema = { type: 'select', label: config?.label || tipedLabel('参考位置', '可设置为左上角、右上角、右下角、左下角，默认为右下角'),