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] =?UTF-8?q?fix(layout):=20=E4=BC=98=E5=8C=96=E5=B8=B8?= =?UTF-8?q?=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,