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

fix(layout): 优化常见布局icon

Browse Source 
Change-Id: Idcab50e2eed78833d4ac2fd5e98d7cbf6c34dd75
This commit is contained in:
wibetter 2022-06-29 17:59:36 +08:00
parent 5f9b9f117f
commit 409a264f14
34 changed files with 306 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/amis-editor/src/icons/index.tsx
View File

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

14
packages/amis-editor/src/icons/layout/layout-1with2.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局" transform="translate(-403.000000, -159.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="layout-1with2" transform="translate(400.000000, 156.000000)">
<g id="分组" transform="translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<path d="M17,1.5 L17,32.5" id="直线" stroke-dasharray="0" transform="translate(17.000000, 17.000000) rotate(90.000000) translate(-17.000000, -17.000000) "></path>
<path d="M17.5,20 L17.5,33" id="直线" stroke-dasharray="0"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 982 B

13
packages/amis-editor/src/icons/layout/layout-2cols.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-两栏" transform="translate(-163.000000, -159.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="layout-2cols" transform="translate(160.000000, 156.000000)">
<g id="分组" transform="translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<path d="M16.5,1.5 L16.5,33.5" id="直线" stroke-dasharray="0"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 806 B

13
packages/amis-editor/src/icons/layout/layout-2row.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-两行" transform="translate(-323.000000, -158.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="layout-2row" transform="translate(320.000000, 155.000000)">
<g id="分组" transform="translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<path d="M17,1.5 L17,32.5" id="直线" stroke-dasharray="0" transform="translate(17.000000, 17.000000) rotate(90.000000) translate(-17.000000, -17.000000) "></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 899 B

14
packages/amis-editor/src/icons/layout/layout-2with1.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-2拖1" transform="translate(-483.000000, -159.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="layout-2with1" transform="translate(480.000000, 156.000000)">
<g id="分组" transform="translate(20.000000, 20.000000) scale(1, -1) translate(-20.000000, -20.000000) translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<path d="M17,1.5 L17,32.5" id="直线" stroke-dasharray="0" transform="translate(17.000000, 17.000000) rotate(90.000000) translate(-17.000000, -17.000000) "></path>
<path d="M17.5,20 L17.5,33" id="直线" stroke-dasharray="0"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

14
packages/amis-editor/src/icons/layout/layout-3cols.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-三栏" transform="translate(-243.000000, -159.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="layout-3cols" transform="translate(240.000000, 156.000000)">
<g id="分组" transform="translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<path d="M11.5,1.5 L11.5,33.5" id="直线" stroke-dasharray="0"></path>
<path d="M22.5,1.5 L22.5,33.5" id="直线" stroke-dasharray="0"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 899 B

14
packages/amis-editor/src/icons/layout/layout-3row.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="常见布局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-上中下" transform="translate(-563.000000, -159.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="layout-3row" transform="translate(560.000000, 156.000000)">
<g id="分组" transform="translate(20.000000, 20.000000) rotate(90.000000) translate(-20.000000, -20.000000) translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<path d="M11.5,1.5 L11.5,33.5" id="直线" stroke-dasharray="0"></path>
<path d="M22.5,1.5 L22.5,33.5" id="直线" stroke-dasharray="0"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 991 B

5
packages/amis-editor/src/icons/layout/layout-absolute.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg t="1614848638463" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14680" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
<path d="M592 336H176c-52.928 0-96 43.072-96 96v416c0 52.928 43.072 96 96 96h416c52.928 0 96-43.072 96-96V432c0-52.928-43.072-96-96-96z m32 512a32 32 0 0 1-32 32H176c-17.632 0-32-14.336-32-32V432c0-17.632 14.368-32 32-32h416c17.664 0 32 14.368 32 32v416z" fill="#515151" p-id="14681"></path><path d="M720 208H304a32 32 0 0 0 0 64h416c17.664 0 32 14.368 32 32v416a32 32 0 1 0 64 0V304c0-52.928-43.072-96-96-96zM528 752H240a32 32 0 1 0 0 64h288a32 32 0 1 0 0-64z" fill="currentColor" p-id="14682"></path>
<path d="M848 80H432a32 32 0 0 0 0 64h416c17.664 0 32 14.368 32 32v416a32 32 0 1 0 64 0V176c0-52.928-43.072-96-96-96z" fill="currentColor" p-id="14683"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 897 B

6
packages/amis-editor/src/icons/layout/layout-fixed.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg t="1614838454815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12115" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
<path d="M904 1024H120c-66.168 0-120-53.832-120-120V120C0 53.832 53.832 0 120 0h784c66.168 0 120 53.832 120 120v784c0 66.168-53.832 120-120 120zM120 4C56.038 4 4 56.038 4 120v784c0 63.962 52.038 116 116 116h784c63.962 0 116-52.038 116-116V120c0-63.962-52.038-116-116-116H120z" fill="currentColor" p-id="12116"></path>
<path d="M402 832h-130c-44.112 0-80-35.888-80-80V272c0-44.112 35.888-80 80-80h130c44.112 0 80 35.888 80 80v480c0 44.112-35.888 80-80 80z m-130-580c-11.028 0-20 8.972-20 20v480c0 11.028 8.972 20 20 20h130c11.028 0 20-8.972 20-20V272c0-11.028-8.972-20-20-20h-130z" fill="currentColor" p-id="12117"></path>
<path d="M752 482h-130c-44.112 0-80-35.888-80-80v-130c0-44.112 35.888-80 80-80h130c44.112 0 80 35.888 80 80v130c0 44.112-35.888 80-80 80z m-130-230c-11.028 0-20 8.972-20 20v130c0 11.028 8.972 20 20 20h130c11.028 0 20-8.972 20-20v-130c0-11.028-8.972-20-20-20h-130z" fill="currentColor" p-id="12118"></path>
<path d="M752 832h-130c-44.112 0-80-35.888-80-80v-130c0-44.112 35.888-80 80-80h130c44.112 0 80 35.888 80 80v130c0 44.112-35.888 80-80 80z m-130-230c-11.028 0-20 8.972-20 20v130c0 11.028 8.972 20 20 20h130c11.028 0 20-8.972 20-20v-130c0-11.028-8.972-20-20-20h-130z" fill="#205dd9" p-id="12119"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

19
packages/amis-editor/src/icons/layout/layout-full.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="path-1" points="4.5 4 30.5 4 30.5 30 4.5 30"></polygon>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="26" height="26" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局" transform="translate(-83.000000, -159.000000)" fill-rule="nonzero" stroke="currentColor">
<g id="layout-full" transform="translate(80.000000, 156.000000)">
<g id="分组" transform="translate(3.000000, 3.000000)">
<rect id="矩形" stroke-width="2" x="1" y="1" width="32" height="32" rx="1"></rect>
<use id="矩形" mask="url(#mask-2)" stroke-width="4" stroke-dasharray="2" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

14
packages/amis-editor/src/icons/layout/layout1-2.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="常见布局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-左一右二" transform="translate(-140.000000, -840.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="左一右二" transform="translate(140.000000, 840.000000)">
<g id="分组" transform="translate(20.000000, 20.000000) rotate(-90.000000) translate(-20.000000, -20.000000) translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<line x1="17" y1="1.5" x2="17" y2="32.5" id="直线" stroke-dasharray="0" transform="translate(17.000000, 17.000000) rotate(90.000000) translate(-17.000000, -17.000000) "></line>
<line x1="17.5" y1="20" x2="17.5" y2="33" id="直线" stroke-dasharray="0"></line>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

14
packages/amis-editor/src/icons/layout/layout2-1.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="常见布局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-左二右一" transform="translate(-220.000000, -840.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="左二右一" transform="translate(220.000000, 840.000000)">
<g id="分组" transform="translate(20.000000, 20.000000) scale(-1, 1) rotate(-90.000000) translate(-20.000000, -20.000000) translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<line x1="17" y1="1.5" x2="17" y2="32.5" id="直线" stroke-dasharray="0" transform="translate(17.000000, 17.000000) rotate(90.000000) translate(-17.000000, -17.000000) "></line>
<line x1="17.5" y1="20" x2="17.5" y2="33" id="直线" stroke-dasharray="0"></line>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

15
packages/amis-editor/src/icons/layout/layout3-1.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="常见布局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-经典布局" transform="translate(-460.000000, -840.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="布局-栏内容器-经典布局" transform="translate(460.000000, 840.000000)">
<g id="分组" transform="translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<line x1="17" y1="1.5" x2="17" y2="32.5" id="直线" stroke-dasharray="0" transform="translate(17.000000, 17.000000) rotate(90.000000) translate(-17.000000, -17.000000) "></line>
<line x1="11.5" y1="20" x2="11.5" y2="33" id="直线" stroke-dasharray="0"></line>
<line x1="14" y1="25" x2="32" y2="25" id="直线" stroke-dasharray="0"></line>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

16
packages/amis-editor/src/icons/layout/layout3-2.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="常见布局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="常见布局-经典布局" transform="translate(-540.000000, -840.000000)" fill-rule="nonzero" stroke="currentColor" stroke-width="2">
<g id="布局-栏内容器-经典布局" transform="translate(540.000000, 840.000000)">
<g id="分组" transform="translate(3.000000, 3.000000)">
<rect id="矩形" x="1" y="1" width="32" height="32" rx="1"></rect>
<line x1="5.5" y1="13" x2="5.5" y2="21" id="直线" stroke-dasharray="0" transform="translate(5.500000, 17.000000) rotate(90.000000) translate(-5.500000, -17.000000) "></line>
<line x1="27.5" y1="13" x2="27.5" y2="21" id="直线" stroke-dasharray="0" transform="translate(27.500000, 17.000000) rotate(90.000000) translate(-27.500000, -17.000000) "></line>
<line x1="11.5" y1="1" x2="11.5" y2="33" id="直线" stroke-dasharray="0"></line>
<line x1="23.5" y1="1" x2="23.5" y2="33" id="直线" stroke-dasharray="0"></line>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

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

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

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

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

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

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

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

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

10
packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx
View File

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

8
packages/amis-editor/src/plugin/Layout/Layout1_1_v2.tsx
View File

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

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

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

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

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

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

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

10
packages/amis-editor/src/plugin/Layout/Layout1_2_v3.tsx
View File

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

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

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

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

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

6
packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx
View File

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

8
packages/amis-editor/src/plugin/Layout/Layout2_1_v3.tsx
View File

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

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

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

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

@ -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 = ['常见布局'];

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

@ -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 = ['常见布局'];

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

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

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

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

14
packages/amis-editor/src/tpl/layout.tsx
View File

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