test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-15 01:11:15 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(amis-saas-8477): 新增自由容器

Browse Source 
Change-Id: Id8e363f4f0718421963bd04c0aea4748786cdf23
This commit is contained in:
wibetter 2022-12-14 17:53:42 +08:00
parent abf0861e62
commit fe98366bbc
20 changed files with 163 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/amis-editor/package.json
View File

@ -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",

6
packages/amis-editor/src/component/TableViewEditor.tsx
View File

@ -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) => (
<div
className="ae-TableViewEditor-rowLine"
@ -536,8 +538,8 @@ export class TableViewEditor extends React.Component<
));
return (
<div className="ae-TableViewEditor" ref={this.tableViewWrapperRef}>
{this.props.children}
<div className="ae-TableViewEditor" ref={this.tableViewWrapperRef} style={schema?.style}>
{children}
{this.renderMergeIcon()}
{rowLines}
{colLines}

1
packages/amis-editor/src/index.tsx
View File

@ -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';

27
packages/amis-editor/src/locale/en-US.ts
View File

@ -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'
});

27
packages/amis-editor/src/locale/zh-CN.ts
View File

@ -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': '防重时间'
});

67
packages/amis-editor/src/plugin/Container.tsx
View File

@ -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')

2
packages/amis-editor/src/plugin/Form/Formula.tsx
View File

@ -67,7 +67,7 @@ export class FormulaControlPlugin extends BasePlugin {
];
renderRenderer(props: any) {
return this.renderPlaceholder('功能组件（公式）', props.key);
return this.renderPlaceholder('功能组件（公式）', props.key, props.style);
}
}

7
packages/amis-editor/src/plugin/Form/Hidden.tsx
View File

@ -34,11 +34,8 @@ export class HiddenControlPlugin extends BasePlugin {
];
renderRenderer(props: any) {
return (
<div key={props.key} className="wrapper-sm b-a b-light m-b-sm">
<span className="text-muted">功能组件（隐藏字段）</span>
</div>
);
console.log('props:', props);
return this.renderPlaceholder('功能组件（隐藏字段）', props.key, props.style);
}
}

6
packages/amis-editor/src/plugin/Form/UUID.tsx
View File

@ -38,11 +38,7 @@ export class UUIDControlPlugin extends BasePlugin {
panelBody = [{type: 'static', value: '自动按 UUID v4 格式生成，无需配置'}];
renderRenderer(props: any) {
return (
<div key={props.key} className="wrapper-sm b-a b-light m-b-sm">
<span className="text-muted">UUID（展现将隐藏）</span>
</div>
);
return this.renderPlaceholder('UUID（展现将隐藏）', props.key, props.style);
}
}

2
packages/amis-editor/src/plugin/Grid.tsx
View File

@ -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';

2
packages/amis-editor/src/plugin/IFrame.tsx
View File

@ -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);
}
}

11
packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
View File

@ -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')

9
packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx
View File

@ -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: {

4
packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx
View File

@ -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);

5
packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx
View File

@ -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);

5
packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx
View File

@ -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);

27
packages/amis-editor/src/plugin/Layout/Layout_free_container.tsx Normal file
View File

@ -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);

17
packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx
View File

@ -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: {

15
packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx
View File

@ -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: {

5
packages/amis-editor/src/plugin/Wrapper.tsx
View File

@ -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')
]
},
{