From fe98366bbc4b9dec0a8fccb119506c2c01a4baab Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Wed, 14 Dec 2022 17:53:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(amis-saas-8477):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E8=87=AA=E7=94=B1=E5=AE=B9=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Id8e363f4f0718421963bd04c0aea4748786cdf23 --- packages/amis-editor/package.json | 8 +-- .../src/component/TableViewEditor.tsx | 6 +- packages/amis-editor/src/index.tsx | 1 + packages/amis-editor/src/locale/en-US.ts | 27 +++++++- packages/amis-editor/src/locale/zh-CN.ts | 27 +++++++- packages/amis-editor/src/plugin/Container.tsx | 67 ++++++++++--------- .../amis-editor/src/plugin/Form/Formula.tsx | 2 +- .../amis-editor/src/plugin/Form/Hidden.tsx | 7 +- packages/amis-editor/src/plugin/Form/UUID.tsx | 6 +- packages/amis-editor/src/plugin/Grid.tsx | 2 +- packages/amis-editor/src/plugin/IFrame.tsx | 2 +- .../src/plugin/Layout/FlexPluginBase.tsx | 11 ++- .../src/plugin/Layout/Layout1_2_v4.tsx | 9 ++- .../src/plugin/Layout/Layout_fixed.tsx | 4 +- .../src/plugin/Layout/Layout_fixed_bottom.tsx | 5 +- .../src/plugin/Layout/Layout_fixed_top.tsx | 5 +- .../plugin/Layout/Layout_free_container.tsx | 27 ++++++++ .../src/plugin/Layout/Layout_scroll_x.tsx | 17 +++-- .../src/plugin/Layout/Layout_scroll_y.tsx | 15 ++--- packages/amis-editor/src/plugin/Wrapper.tsx | 5 +- 20 files changed, 163 insertions(+), 90 deletions(-) create mode 100644 packages/amis-editor/src/plugin/Layout/Layout_free_container.tsx diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index b6c698a38..0c0e3a89d 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -53,10 +53,10 @@ "@types/sortablejs": "^1.10.7", "@types/tinycolor2": "^1.4.3", "ajv": "^8.8.2", - "amis": "2.5.2", - "amis-core": "2.5.2", - "amis-formula": "2.5.2", - "amis-ui": "2.5.2", + "amis": "2.5.3-beta.0", + "amis-core": "2.5.3-beta.0", + "amis-formula": "2.5.3-beta.0", + "amis-ui": "2.5.3-beta.0", "axios": "0.21.1", "concurrently": "^6.2.0", "css-loader": "^6.2.0", diff --git a/packages/amis-editor/src/component/TableViewEditor.tsx b/packages/amis-editor/src/component/TableViewEditor.tsx index 8ab766e2e..518cd17c9 100644 --- a/packages/amis-editor/src/component/TableViewEditor.tsx +++ b/packages/amis-editor/src/component/TableViewEditor.tsx @@ -16,6 +16,7 @@ import {autobind, JSONGetById, EditorStoreType} from 'amis-editor-core'; interface TableViewEditorProps { schema: TableViewSchema; manager: EditorManager; + children?: any; } interface TableViewEditorState { @@ -517,6 +518,7 @@ export class TableViewEditor extends React.Component< } render() { + const {children, schema} = this.props; let rowLines = this.state.trIds.map((id: string) => (
- {this.props.children} +
+ {children} {this.renderMergeIcon()} {rowLines} {colLines} diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index 1e0a9a690..063e7fbcf 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -144,6 +144,7 @@ import './plugin/Layout/Layout_fixed'; import './plugin/Layout/Layout_scroll_x'; import './plugin/Layout/Layout_scroll_y'; import './plugin/Layout/Layout1_2_v4'; +import './plugin/Layout/Layout_free_container'; import {GridPlugin} from './plugin/Grid'; diff --git a/packages/amis-editor/src/locale/en-US.ts b/packages/amis-editor/src/locale/en-US.ts index 50cccac7e..37f95f0fc 100644 --- a/packages/amis-editor/src/locale/en-US.ts +++ b/packages/amis-editor/src/locale/en-US.ts @@ -3546,5 +3546,30 @@ extendLocale('en-US', { '2bd921d0ea7a73b77ee0fcddb1afcc84': 'Minimum height', 'eb7366583485f478e3d8c2b105ea51ff': 'Defines the magnification of the item. If it is set to 0, it will not be magnified even if there is space left in the parent container.', - '5d3d48de1ba22368eacdc1c69fb044ce': 'Component inner layer CSS class name' + '5d3d48de1ba22368eacdc1c69fb044ce': 'Component inner layer CSS class name', + '72c32b47c5e4dcd58ddabdb8fde761a0': + 'Suspended container: a special layout container based on CSS Flex implementation.', + 'a03384e93b62e3110aa92c9e345111ba': + 'Bottom suction container: a layout container based on CSS Flex.', + 'f564e3e66dd2aca0e080cb6484c95a5e': + 'Ceiling container: a layout container based on CSS Flex.', + 'db805d4e361ac2d3fc6047eaea1a7c69': 'Free container', + '9ccbfde404798593fa6fdeac9dbef200': + 'Free container: its direct child elements support dragging to adjust the position.', + 'f20ca09e513399510ce34ba2cb05b7d9': + 'X axis rolling container: a layout container based on CSS Flex implementation.', + '47ef0cec2c3436377a42390e10de4567': + 'Y-axis rolling container: a layout container based on CSS Flex.', + '8c2bb89f516205027b9ed6609fb17726': 'Blocking condition', + '46a3c6ab94da0b16a707bdd3b74c9e09': + 'When the conditions are met, the execution of subsequent actions of the current event will be blocked', + '6e6d4269d0dc3324d551062350a2ae9f': 'Silent request', + '56e13c39822a814ab39b0d5a0867d7dc': + 'When enabled, the service request will be sent in a silent mode, that is, no success or error message will pop up.', + '7f019b96ffb7d72ec8d6ce8d76e5362f': 'Expression configured', + '699829ed5bab67dfb360764c3bbaed4e': '{{@1}} - Event Configuration', + '5ba999eb762f60324033b735e55d989c': 'Event weight prevention', + '7fe94616be0e8fb5ef5ab40a7397f0aa': + 'After event anti duplication is enabled, only the last event will be executed when triggered multiple times within the anti duplication time', + '91b72e901f1663637157cda638ac4dcc': 'Anti gravity time' }); diff --git a/packages/amis-editor/src/locale/zh-CN.ts b/packages/amis-editor/src/locale/zh-CN.ts index 76f714045..5149c8a60 100644 --- a/packages/amis-editor/src/locale/zh-CN.ts +++ b/packages/amis-editor/src/locale/zh-CN.ts @@ -3133,5 +3133,30 @@ extendLocale('zh-CN', { '2bd921d0ea7a73b77ee0fcddb1afcc84': '最小高度', 'eb7366583485f478e3d8c2b105ea51ff': '定义项目的放大比例，如果设置为0，即使父容器存在剩余空间，也不放大。', - '5d3d48de1ba22368eacdc1c69fb044ce': '组件内层 CSS 类名' + '5d3d48de1ba22368eacdc1c69fb044ce': '组件内层 CSS 类名', + '72c32b47c5e4dcd58ddabdb8fde761a0': + '悬浮容器: 基于 CSS Flex 实现的特殊布局容器。', + 'a03384e93b62e3110aa92c9e345111ba': + '吸底容器: 基于 CSS Flex 实现的布局容器。', + 'f564e3e66dd2aca0e080cb6484c95a5e': + '吸顶容器: 基于 CSS Flex 实现的布局容器。', + 'db805d4e361ac2d3fc6047eaea1a7c69': '自由容器', + '9ccbfde404798593fa6fdeac9dbef200': + '自由容器: 其直接子元素支持拖拽调整位置。', + 'f20ca09e513399510ce34ba2cb05b7d9': + 'x轴滚动容器: 基于 CSS Flex 实现的布局容器。', + '47ef0cec2c3436377a42390e10de4567': + 'y轴滚动容器: 基于 CSS Flex 实现的布局容器。', + '8c2bb89f516205027b9ed6609fb17726': '阻断条件', + '46a3c6ab94da0b16a707bdd3b74c9e09': + '满足条件时，将会阻断当前事件的后续动作的执行', + '6e6d4269d0dc3324d551062350a2ae9f': '静默请求', + '56e13c39822a814ab39b0d5a0867d7dc': + '开启后，服务请求将以静默模式发送，即不会弹出成功或报错提示。', + '7f019b96ffb7d72ec8d6ce8d76e5362f': '表达式已配置', + '699829ed5bab67dfb360764c3bbaed4e': '{{@1}}-事件配置', + '5ba999eb762f60324033b735e55d989c': '事件防重', + '7fe94616be0e8fb5ef5ab40a7397f0aa': + '开启事件防重后，防重时间内多次触发事件只会执行最后一次', + '91b72e901f1663637157cda638ac4dcc': '防重时间' }); diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index f6018445f..8bfe8b05b 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -43,9 +43,40 @@ export class ContainerPlugin extends BasePlugin { const isRowContent = curRendererSchema?.direction === 'row' || curRendererSchema?.direction === 'row-reverse'; + const isFreeContainer = curRendererSchema?.isFreeContainer || false; const isFlexItem = this.manager?.isFlexItem(context?.id); const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id); + const displayTpl = [ + getSchemaTpl('layout:display'), + getSchemaTpl('layout:flexDirection', { + visibleOn: 'data.style && data.style.display === "flex"' + }), + getSchemaTpl('layout:justifyContent', { + 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', { + 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"' + }), + ]; + return getSchemaTpl('tabs', [ { title: '属性', @@ -117,37 +148,9 @@ export class ContainerPlugin extends BasePlugin { 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', { - 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', { - 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"' - }), + // 自由容器不需要 display 相关配置项 + ...(!isFreeContainer ? displayTpl : []), getSchemaTpl('layout:isFixedHeight', { visibleOn: `${!isFlexItem || !isFlexColumnItem}` @@ -188,8 +191,8 @@ export class ContainerPlugin extends BasePlugin { isFlexItem && !isFlexColumnItem } && data.style.flex === '0 0 auto')` }), - - !isFlexItem ? getSchemaTpl('layout:margin-center') : null + !isFlexItem ? getSchemaTpl('layout:margin-center') : null, + getSchemaTpl('layout:z-index') ] }, getSchemaTpl('status') diff --git a/packages/amis-editor/src/plugin/Form/Formula.tsx b/packages/amis-editor/src/plugin/Form/Formula.tsx index 210504080..e44344e93 100644 --- a/packages/amis-editor/src/plugin/Form/Formula.tsx +++ b/packages/amis-editor/src/plugin/Form/Formula.tsx @@ -67,7 +67,7 @@ export class FormulaControlPlugin extends BasePlugin { ]; renderRenderer(props: any) { - return this.renderPlaceholder('功能组件（公式）', props.key); + return this.renderPlaceholder('功能组件（公式）', props.key, props.style); } } diff --git a/packages/amis-editor/src/plugin/Form/Hidden.tsx b/packages/amis-editor/src/plugin/Form/Hidden.tsx index f6f8f1727..f324ae817 100644 --- a/packages/amis-editor/src/plugin/Form/Hidden.tsx +++ b/packages/amis-editor/src/plugin/Form/Hidden.tsx @@ -34,11 +34,8 @@ export class HiddenControlPlugin extends BasePlugin { ]; renderRenderer(props: any) { - return ( -
- 功能组件（隐藏字段） -
- ); + console.log('props:', props); + return this.renderPlaceholder('功能组件（隐藏字段）', props.key, props.style); } } diff --git a/packages/amis-editor/src/plugin/Form/UUID.tsx b/packages/amis-editor/src/plugin/Form/UUID.tsx index 25ed7884b..d3c7166ba 100644 --- a/packages/amis-editor/src/plugin/Form/UUID.tsx +++ b/packages/amis-editor/src/plugin/Form/UUID.tsx @@ -38,11 +38,7 @@ export class UUIDControlPlugin extends BasePlugin { panelBody = [{type: 'static', value: '自动按 UUID v4 格式生成，无需配置'}]; renderRenderer(props: any) { - return ( -
- UUID（展现将隐藏） -
- ); + return this.renderPlaceholder('UUID（展现将隐藏）', props.key, props.style); } } diff --git a/packages/amis-editor/src/plugin/Grid.tsx b/packages/amis-editor/src/plugin/Grid.tsx index 384e3d36a..524edb40d 100644 --- a/packages/amis-editor/src/plugin/Grid.tsx +++ b/packages/amis-editor/src/plugin/Grid.tsx @@ -29,7 +29,7 @@ export class GridPlugin extends BasePlugin { isBaseComponent = true; description = '分栏布局'; docLink = '/amis/zh-CN/components/grid'; - tags = ['容器']; + tags = ['布局']; icon = 'fa fa-th'; pluginIcon = 'grid-plugin'; diff --git a/packages/amis-editor/src/plugin/IFrame.tsx b/packages/amis-editor/src/plugin/IFrame.tsx index cc2d01f7b..2782c61f5 100644 --- a/packages/amis-editor/src/plugin/IFrame.tsx +++ b/packages/amis-editor/src/plugin/IFrame.tsx @@ -87,7 +87,7 @@ export class IFramePlugin extends BasePlugin { }; renderRenderer(props: any) { - return this.renderPlaceholder(`IFrame 页面（${props.src}）`); + return this.renderPlaceholder(`IFrame 页面（${props.src}）`, props.key, props.style); } } diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 8d4e8e166..2e56c19ca 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -15,7 +15,7 @@ import type { // 默认的列容器Schema export const defaultFlexColumnSchema = (title?: string) => { return { - type: 'wrapper', + type: 'container', body: [], size: 'xs', style: { @@ -59,13 +59,13 @@ export class FlexPluginBase extends BasePlugin { description = '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用'; docLink = '/amis/zh-CN/components/flex'; - tags = ['常见布局']; + tags = ['布局']; scaffold: any = defaultFlexContainerSchema; previewSchema = { ...this.scaffold }; - panelTitle = 'Flex'; + panelTitle = '布局容器'; panelJustify = true; // 右侧配置项默认左右展示 @@ -121,7 +121,6 @@ export class FlexPluginBase extends BasePlugin { getSchemaTpl('layout:inset', { mode: 'vertical' }), - getSchemaTpl('layout:z-index'), getSchemaTpl('layout:flexDirection', { name: 'direction' }), @@ -192,8 +191,8 @@ export class FlexPluginBase extends BasePlugin { isFlexItem && !isFlexColumnItem } && data.style.flex === '0 0 auto')` }), - - !isFlexItem ? getSchemaTpl('layout:margin-center') : null + !isFlexItem ? getSchemaTpl('layout:margin-center') : null, + getSchemaTpl('layout:z-index') ] }, getSchemaTpl('status') 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 34537f929..d4c7b0ef3 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx @@ -6,14 +6,13 @@ export default class Layout1_2_v4 extends FlexPluginBase { isBaseComponent = true; pluginIcon = 'layout-3-1-plugin'; description = '常见布局：经典布局（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; order = 307; scaffold: any = { type: 'flex', className: 'p-1', items: [ { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -25,7 +24,7 @@ export default class Layout1_2_v4 extends FlexPluginBase { type: 'flex', items: [ { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -38,7 +37,7 @@ export default class Layout1_2_v4 extends FlexPluginBase { type: 'flex', items: [ { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -49,7 +48,7 @@ export default class Layout1_2_v4 extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx index 1c4e73156..d825eb718 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx @@ -5,8 +5,7 @@ export default class Layout_fixed extends FlexPluginBase { name = '悬浮容器'; isBaseComponent = true; pluginIcon = 'layout-fixed-plugin'; - description = '常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; + description = '悬浮容器: 基于 CSS Flex 实现的特殊布局容器。'; order = 503; scaffold: any = { type: 'container', @@ -22,6 +21,7 @@ export default class Layout_fixed extends FlexPluginBase { }, originPosition: 'right-bottom' }; + panelTitle = '悬浮容器'; } 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 351aa848a..d7f8b4fc0 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx @@ -5,11 +5,11 @@ export default class Layout_fixed_bottom extends FlexPluginBase { name = '吸底容器'; isBaseComponent = true; pluginIcon = 'flex-container-plugin'; - description = '常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; + description = '吸底容器: 基于 CSS Flex 实现的布局容器。'; order = 501; scaffold: any = { type: 'flex', + title: '吸底容器', className: 'p-1', items: [ defaultFlexColumnSchema(), @@ -34,6 +34,7 @@ export default class Layout_fixed_bottom extends FlexPluginBase { isFixedHeight: false, originPosition: 'right-bottom' }; + panelTitle = '吸底容器'; } 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 index 6d049438f..74ed12f2c 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx @@ -5,11 +5,11 @@ export default class Layout_fixed_top extends FlexPluginBase { name = '吸顶容器'; isBaseComponent = true; pluginIcon = 'flex-container-plugin'; - description = '常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; + description = '吸顶容器: 基于 CSS Flex 实现的布局容器。'; order = 502; scaffold: any = { type: 'flex', + title: '吸顶容器', className: 'p-1', items: [ defaultFlexColumnSchema(), @@ -32,6 +32,7 @@ export default class Layout_fixed_top extends FlexPluginBase { isFixedHeight: false, originPosition: 'right-bottom' }; + panelTitle = '吸顶容器'; } registerEditorPlugin(Layout_fixed_top); diff --git a/packages/amis-editor/src/plugin/Layout/Layout_free_container.tsx b/packages/amis-editor/src/plugin/Layout/Layout_free_container.tsx new file mode 100644 index 000000000..346ef4f32 --- /dev/null +++ b/packages/amis-editor/src/plugin/Layout/Layout_free_container.tsx @@ -0,0 +1,27 @@ +import type {BaseEventContext} from 'amis-editor-core'; +import {registerEditorPlugin, getSchemaTpl} from 'amis-editor-core'; +import {ContainerPlugin} from '../Container'; + +export default class Layout_free_container extends ContainerPlugin { + name = '自由容器'; + isBaseComponent = true; + pluginIcon = 'layout-fixed-plugin'; + description = '自由容器: 其直接子元素支持拖拽调整位置。'; + order = 503; + tags = ['布局']; + scaffold: any = { + type: 'container', + title: '自由容器', + isFreeContainer: true, + size: 'xs', + body: [], + style: { + position: 'static', + minHeight: '200px' + }, + }; + + panelTitle = '自由容器'; +} + +registerEditorPlugin(Layout_free_container); \ No newline at end of file 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 07ccd5e04..aa7d85327 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx @@ -5,15 +5,14 @@ export default class Layout_scroll_x extends FlexPluginBase { name = 'x轴滚动容器'; isBaseComponent = true; pluginIcon = 'layout-3cols-plugin'; - description = '常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; + description = 'x轴滚动容器: 基于 CSS Flex 实现的布局容器。'; order = 505; scaffold: any = { type: 'flex', className: 'p-1', items: [ { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -26,7 +25,7 @@ export default class Layout_scroll_x extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -39,7 +38,7 @@ export default class Layout_scroll_x extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -52,7 +51,7 @@ export default class Layout_scroll_x extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -65,7 +64,7 @@ export default class Layout_scroll_x extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -78,7 +77,7 @@ export default class Layout_scroll_x extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -91,7 +90,7 @@ export default class Layout_scroll_x extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { 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 22c72c63c..0db4b1687 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx @@ -5,15 +5,14 @@ export default class Layout_scroll_y extends FlexPluginBase { name = 'y轴滚动容器'; isBaseComponent = true; pluginIcon = 'layout-3row-plugin'; - description = '常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。'; - tags = ['常见布局']; + description = 'y轴滚动容器: 基于 CSS Flex 实现的布局容器。'; order = 504; scaffold: any = { type: 'flex', className: 'p-1', items: [ { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -25,7 +24,7 @@ export default class Layout_scroll_y extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -38,7 +37,7 @@ export default class Layout_scroll_y extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -51,7 +50,7 @@ export default class Layout_scroll_y extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -64,7 +63,7 @@ export default class Layout_scroll_y extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { @@ -77,7 +76,7 @@ export default class Layout_scroll_y extends FlexPluginBase { } }, { - type: 'wrapper', + type: 'container', size: 'xs', body: [], style: { diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index f95461ffc..5ab0f3859 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -83,7 +83,6 @@ export class WrapperPlugin extends BasePlugin { getSchemaTpl('layout:inset', { mode: 'vertical' }), - getSchemaTpl('layout:z-index'), getSchemaTpl('layout:display'), getSchemaTpl('layout:flexDirection', { visibleOn: 'data.style && data.style.display === "flex"' @@ -153,8 +152,8 @@ export class WrapperPlugin extends BasePlugin { isFlexItem && !isFlexColumnItem } && data.style.flex === '0 0 auto')` }), - - !isFlexItem ? getSchemaTpl('layout:margin-center') : null + !isFlexItem ? getSchemaTpl('layout:margin-center') : null, + getSchemaTpl('layout:z-index') ] }, {