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,