mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 20:09:08 +08:00
amis-saas-6892 merge pre-release分支，解决common.ts一个文件冲突
Change-Id: I24f9841fbe5b07bdf463945245049a74248c2ef1
This commit is contained in:
jiatianqi
commit
ec4e7d9988
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "amis-editor",
|
||||
"version": "5.2.1",
|
||||
"version": "5.2.1-beta.7",
|
||||
"description": "amis 可视化编辑器",
|
||||
"main": "lib/index.js",
|
||||
"module": "esm/index.js",
|
||||
@ -23,14 +23,6 @@
|
||||
"lib",
|
||||
"esm"
|
||||
],
|
||||
"lint-staged": {
|
||||
"{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}": [
|
||||
"prettier --write"
|
||||
],
|
||||
"{src,scss,examples}/**/**/*.scss": [
|
||||
"stylelint"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@webcomponents/webcomponentsjs": "^2.6.0",
|
||||
"amis-editor-core": "*",
|
||||
|
||||
@ -79,8 +79,7 @@ function transpileDynamicImportForCJS(options) {
|
||||
}
|
||||
|
||||
return {
|
||||
left:
|
||||
'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
|
||||
left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
|
||||
right: '], function(mod) {fullfill(tslib.__importStar(mod))})})})'
|
||||
};
|
||||
|
||||
@ -141,11 +140,13 @@ function getPlugins(format = 'esm') {
|
||||
Copyright 2018<%= moment().format('YYYY') > 2018 ? '-' + moment().format('YYYY') : null %> ${author}
|
||||
`
|
||||
}),
|
||||
onRollupError((error) => {
|
||||
onRollupError(error => {
|
||||
console.warn(`[构建异常]${error}`);
|
||||
// 构建异常时，删除 tsconfig.tsbuildinfo
|
||||
fs.unlink(path.resolve(__dirname, 'tsconfig.tsbuildinfo'), () => {
|
||||
console.info('[构建异常]已自动删除tsconfig.tsbuildinfo，请重试构建命令。');
|
||||
console.info(
|
||||
'[构建异常]已自动删除tsconfig.tsbuildinfo，请重试构建命令。'
|
||||
);
|
||||
});
|
||||
})
|
||||
];
|
||||
@ -161,4 +162,3 @@ function onRollupError(callback = () => {}) {
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -309,13 +309,8 @@ export class TableViewEditor extends React.Component<
|
||||
// 合并单元格操作
|
||||
@autobind
|
||||
handleMergeCell() {
|
||||
const {
|
||||
firstCell,
|
||||
minRow,
|
||||
minCol,
|
||||
maxRow,
|
||||
maxCol
|
||||
} = this.findFirstAndLastCell();
|
||||
const {firstCell, minRow, minCol, maxRow, maxCol} =
|
||||
this.findFirstAndLastCell();
|
||||
if (!firstCell) {
|
||||
console.warn('找不到第一个 cell');
|
||||
return;
|
||||
|
||||
@ -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
14
packages/amis-editor/src/icons/layout/layout-1with2.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 982 B |
13
packages/amis-editor/src/icons/layout/layout-2cols.svg
Normal file
13
packages/amis-editor/src/icons/layout/layout-2cols.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 806 B |
13
packages/amis-editor/src/icons/layout/layout-2row.svg
Normal file
13
packages/amis-editor/src/icons/layout/layout-2row.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 899 B |
14
packages/amis-editor/src/icons/layout/layout-2with1.svg
Normal file
14
packages/amis-editor/src/icons/layout/layout-2with1.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
14
packages/amis-editor/src/icons/layout/layout-3cols.svg
Normal file
14
packages/amis-editor/src/icons/layout/layout-3cols.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 899 B |
14
packages/amis-editor/src/icons/layout/layout-3row.svg
Normal file
14
packages/amis-editor/src/icons/layout/layout-3row.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 991 B |
@ -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>
|
||||
|
After Width: | Height: | Size: 897 B |
6
packages/amis-editor/src/icons/layout/layout-fixed.svg
Normal file
6
packages/amis-editor/src/icons/layout/layout-fixed.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
19
packages/amis-editor/src/icons/layout/layout-full.svg
Normal file
19
packages/amis-editor/src/icons/layout/layout-full.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
14
packages/amis-editor/src/icons/layout/layout1-2.svg
Normal file
14
packages/amis-editor/src/icons/layout/layout1-2.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
14
packages/amis-editor/src/icons/layout/layout2-1.svg
Normal file
14
packages/amis-editor/src/icons/layout/layout2-1.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
15
packages/amis-editor/src/icons/layout/layout3-1.svg
Normal file
15
packages/amis-editor/src/icons/layout/layout3-1.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
16
packages/amis-editor/src/icons/layout/layout3-2.svg
Normal file
16
packages/amis-editor/src/icons/layout/layout3-2.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -138,6 +138,12 @@ import './plugin/CodeView';
|
||||
import './plugin/WebComponent';
|
||||
import './plugin/CRUD2';
|
||||
import './plugin/ColumnToggler';
|
||||
import './plugin/Layout/Layout_fixed_bottom';
|
||||
import './plugin/Layout/Layout_fixed_top';
|
||||
import './plugin/Layout/Layout_fixed';
|
||||
import './plugin/Layout/Layout_scroll_x';
|
||||
import './plugin/Layout/Layout_scroll_y';
|
||||
import './plugin/Layout/Layout1_2_v4';
|
||||
|
||||
import {GridPlugin} from './plugin/Grid';
|
||||
|
||||
@ -159,6 +165,7 @@ import './renderer/style-control/Border';
|
||||
import './renderer/style-control/BoxShadow';
|
||||
import './renderer/style-control/Background';
|
||||
import './renderer/style-control/Display';
|
||||
import './renderer/style-control/InsetBoxModel';
|
||||
import './renderer/RangePartsControl';
|
||||
import './renderer/DataBindingControl';
|
||||
import './renderer/DataMappingControl';
|
||||
|
||||
@ -3331,5 +3331,172 @@ extendLocale('en-US', {
|
||||
'951f802ebd0c0d795fbae6767a5ee9b3': 'Initialize interface request succeeded',
|
||||
'da0126992b4937a5fd847ef5366b02e6':
|
||||
'Data returned by initialization interface request successfully',
|
||||
'70b8342d743374233bfee0f56c7f0fc7': 'Node Sample Data'
|
||||
'70b8342d743374233bfee0f56c7f0fc7': 'Node Sample Data',
|
||||
'38f85482d657cd4db1280c5efa1950fd': '{{@1}} Alignment',
|
||||
'0a0574baedb8eb2abf7daf25159d8bb1':
|
||||
'Set the alignment of sub elements on the spindle',
|
||||
'5ccc4c05cd41195f202f550a4c307a64':
|
||||
'Set the alignment of child elements on the cross axis',
|
||||
'b1b98c19058af70d8bd499e1899e93bc': 'Layout Container',
|
||||
'03097563d201ad3a29c79165226764e5':
|
||||
'The layout container is a layout effect based on CSS Flex. It is more controllable than Grid and HBox for the location of child nodes, and easier to use than CSS classes',
|
||||
'e151c86d57096bb74dcd390ade29362b': 'New column',
|
||||
'e5f9b3a3655b8daddcee8b97b735887f': 'Insert Layout Container Forward',
|
||||
'577b33bf128fba16ed8e9bf7c395f455': 'Insert Layout Container Backward',
|
||||
'31f84d1bc6175fd0828a81b5bfd98736': 'Add column level element',
|
||||
'cbc1d00cc640b67ee34a29a694ef162a':
|
||||
'Left (upper) insert column level container',
|
||||
'bb3cc092e17ff83e943554bde3d5771b':
|
||||
'Insert column level container on the right (lower) side',
|
||||
'b19b454fe603e03e98ad9772615c7c32': 'Positioning mode',
|
||||
'8444f01399c0003fbb68eeff1310566c':
|
||||
'Specifies the positioning type of the current container element',
|
||||
'5ddea41072a27a74a1715549dfb79bc2': 'relative',
|
||||
'e9513a013011450c57cfe3ef51b7d4b0': 'Fixed (relative to window)',
|
||||
'3059599d8ebfec00a8ab53346d9b4fa3': 'Absolute (relative to parent container)',
|
||||
'86a6b5a0a45bba5b6187cc2277e3375e': 'Layout Location',
|
||||
'6e72759ed1cbf9f9e8523197dd93888f':
|
||||
'Specifies the location of the current container element, which is used to configure top, right, bottom, and left.',
|
||||
'6896da744f8ae9633263d55af0fceae1': 'Hierarchy',
|
||||
'6f649980c839dffca1506f20d534fe3d':
|
||||
'Specifies the stacking order of elements. Elements at higher levels will always be above elements at lower levels.',
|
||||
'a8489cf57d7f44e889aff79434776f47':
|
||||
'The default is block level, which can be set to elastic layout mode (flex layout container)',
|
||||
'4180e30c34190007ffaa654e0959b8a3': 'Intra row flexible layout',
|
||||
'ebe7bde5c9094813e2924473488d281a': 'In row block level',
|
||||
'dde193342b8c350ae29795117c0c5b9a': 'Horizontal Alignment',
|
||||
'5b15af1f73b4f2d5bb152410863602f4': 'Vertical Alignment',
|
||||
'78d32d2bd35c0262fe77b517c5a4fb62': 'Arrangement direction',
|
||||
'3fa460b81736c0360f6f7571801935b1':
|
||||
'If the direction is set to horizontal arrangement, children are placed from left to right; If it is set to the vertical arrangement direction, the sub items will be set from top to bottom',
|
||||
'fa228d6bec96d052de0ad369407f5241':
|
||||
'Horizontal (starting point is at the right end)',
|
||||
'2df3bc66ab3fcb0de1caf11831eff595': 'Vertical (starting point at lower edge)',
|
||||
'98b2fea2d8f3ceb81e9ce32d66383f05': 'How to wrap lines',
|
||||
'9af509c2a9636343199b9072e001826c': 'Default (no line breaks)',
|
||||
'd4054144c4341872496e3550fdb1b826': 'Word wrap (reverse)',
|
||||
'ee2df1c1a0d99094f641166535948d4b': 'Elastic mode',
|
||||
'947c03e411c20563c7ac67d0a5ad741b':
|
||||
'After the elastic mode is set, the current area is automatically adapted',
|
||||
'f92626f9e56b3e2d0c47495a446acf71': 'Elastic width',
|
||||
'cf8852316501c22ea19c4e432c59e7d7': 'Default Width',
|
||||
'9cc69c8469b23b77519065d3df381113':
|
||||
'Define the main size occupied by the project before allocating extra space',
|
||||
'0ad8b3b736ae5b9e23cf16ac13e1e283': 'Proportion setting',
|
||||
'fa6bb048a2f73975a40789b30c5b8a06':
|
||||
'Defines the magnification of the project, which is 0 by default, that is, if there is any remaining space, it will not be magnified.',
|
||||
'c19b79073b676b9bade80613aba2dbfa': 'Fixed height',
|
||||
'd1b91a1a24f0d4935c2dd13e6a22b6d4':
|
||||
'The maximum width is the maximum horizontal display area of the current element',
|
||||
'c2ed47a1f0f45cf7e2d22bddffc8a732':
|
||||
'Scroll mode for setting horizontal direction',
|
||||
'cbc7af1d6422e88f4b87ade748e0f07d': 'Exceeding the display',
|
||||
'b48a90c77b5e792260d830c2d68c527e': 'Beyond hiding',
|
||||
'ddea62517e2bd1007712689746ebfe00': 'Scrolling',
|
||||
'55becc96b40692cc9cf898b331d16976': 'Automatic adaptation',
|
||||
'ede82efb4a69c35743185c6c73ab771e':
|
||||
'The minimum width is the smallest horizontal display area of the current element',
|
||||
'6f420734edfaff00a8210a4c762a9207':
|
||||
'The maximum height is the display height with the most current elements',
|
||||
'411f9d120093314cd38e6dd5cce398c6':
|
||||
'The minimum width is the smallest vertical display area of the current element',
|
||||
'b31c6aaa78f8e24df665ce80ab5301e2':
|
||||
'Scroll mode for setting the vertical direction',
|
||||
'4fc0e68b093db41b45a4ea706fbe56f3': 'Center Display',
|
||||
'55efb233147f9539de019d9abc7653f9':
|
||||
'Center display by setting margin: 0 auto',
|
||||
'2bf5bcbe21f39b254a601664fb8b264d': 'Default (Wrap)',
|
||||
'b2d418355cb59a5613ecff7b150c588f': 'nowrap ',
|
||||
'7d1313925f158b747c094a7f2480e535': 'Reference position',
|
||||
'41a7494315a528f0f9618646f7e0dddf':
|
||||
'It can be set as upper left corner, upper right corner, lower right corner and lower left corner. The default is lower right corner',
|
||||
'845c61ac8f51c6702dd22e5657c07e8d': 'Lower right corner (default)',
|
||||
'2794fe303cf8ad4395fe93271fae7925':
|
||||
'Layout containers are mainly used to design container components with complex layouts. The layout effect implemented based on CSS Flex is more controllable than Grid and HBox for the location of child nodes, and easier to use than using CSS classes',
|
||||
'abbd790f85282349e2004df9fd494e31':
|
||||
'Main size occupied by default before allocating extra space',
|
||||
'dbb93e8f413074ead24b6ed822247d98': 'Insert Layout Container Above',
|
||||
'5b5765b3fd7e72e04a5cd3e2ef6218a4': 'Insert Layout Container Below',
|
||||
'ee466872b9a43e720e296813dbc5adee': '{{@1}} Insert Column Level Container',
|
||||
'14c495b1248756310c75396cd41f4fe9': 'upper',
|
||||
'e33ac3a4c1a95a02a18f1555038804da': 'Below',
|
||||
'e731c52010266b8ade1e7e78e25cdccc': 'Common layouts',
|
||||
'f80bd0a5546465336f4f9cafdfa8b67f': 'Default Height',
|
||||
'ba9ccf1040d7abd0848046330ba3558c': 'Classic layout',
|
||||
'230d65546ea0d299907943403608233c':
|
||||
'Common layout: classic layout (layout container based on CSS Flex implementation).',
|
||||
'9bbb7cfaeb34a2b5c095ac253355f028': 'Levitation vessel',
|
||||
'a3e91631c1a3a43e09526ea7f6b8595c':
|
||||
'Common layout: suspended container (layout container based on CSS Flex implementation).',
|
||||
'd423930b823fc45f08c18922b19e4e9e': 'Bottom suction vessel',
|
||||
'b8b4eb373d8ba6f98271b681fba2511d':
|
||||
'Common layout: bottom suction container (a layout container based on CSS Flex implementation).',
|
||||
'faaa6444a709917ff33e0d58948504dc': 'Ceiling container',
|
||||
'1facf0bd0f56c66759857345e7434443':
|
||||
'Common layout: ceiling container (a layout container based on CSS Flex implementation).',
|
||||
'f416a3a2566dda04bc0ef67027e6f460': 'X axis rolling container',
|
||||
'e3d9ad8453925764f2918dbfd6ff824e':
|
||||
'Common layout: x-axis rolling container (based on the layout container implemented by CSS Flex).',
|
||||
'053e0cbf18c8fe59b928d52fcd556b88': 'Y-axis rolling container',
|
||||
'c9f089cefc06c217c6dddfe2fc772ea3':
|
||||
'Common layout: y-axis rolling container (a layout container based on CSS Flex implementation).',
|
||||
'3587540660a01f8a8aff6a2c0409a404':
|
||||
'After the elastic mode is turned on, the current area is automatically adapted',
|
||||
'2ea6f1f33dec7cb3c23a1bf1f9eab11a': 'Mouse click',
|
||||
'fe9228649853d08eebee72ad5521a3dd': 'Triggered when the mouse clicks',
|
||||
'a643d2fe12d205eb8fb5cffe92f62c35': 'Triggered on mouse over',
|
||||
'764c134791952dd1acb0f23587e75421': 'Toggle legend selection status',
|
||||
'262cd2f688751332c1907a659e686210':
|
||||
'Triggered when the legend is switched to the selected state',
|
||||
'fd312ae2f1c24b8a14d9412bb3c6bb76': 'Last n days',
|
||||
'68cba5f27ab003cfada5eb4c1f29eb21': 'Within n days',
|
||||
'34b06708894a178c440e6f6539e95e9e': 'Last n weeks',
|
||||
'f0e1b8d8a6e731360d7348bc8301d44a': 'Within n weeks',
|
||||
'5cad2778bb8f01d1a1b1226082eb2117': 'Last n months',
|
||||
'ff76f60b3da86a0d2c6663b170a7955a': 'Within n months',
|
||||
'9ff9b56c9ed633ee09396830e93113ad': 'Last n quarters',
|
||||
'2b80b20008b3ae81136217ae10a1fbaf': 'Within n quarters',
|
||||
'84752114d27119dc50d8a7b9ac0b788b': 'Last n years',
|
||||
'5df2352afebd73d1f568ebaa81e2db28': 'Within n years',
|
||||
'8572d14f815d840bd9e940cd8ee4e380':
|
||||
'Add or subtract data values through up and down arrow keys on the keyboard',
|
||||
'925d31bb30d63576600299475a910c33':
|
||||
'Displayed before entering content, not included in data value',
|
||||
'42677544e2cbee28f7e7df216e685543':
|
||||
'Displayed after input, not included in data value',
|
||||
'046c6233e03af774df7b90b4504fa96c': 'lately',
|
||||
'249aba763258bbe488af3e79a381d265': 'day',
|
||||
'2f8ab07bea442bc6ce8a9e99ff88e5c1': 'Within days',
|
||||
'a657f46f5bb00961adfae80d12e41b3d': 'week',
|
||||
'b1599eaa05dc9b3d90be5aebc5c84338': 'Within weeks',
|
||||
'e42b99d59954ce6437e66f416850425a': 'month',
|
||||
'3c690347976de82df1909750cbc82b80': 'Within months',
|
||||
'b62ba98a627851e911bef8fbb005bd4a': 'Within quarter',
|
||||
'465260fe80b0c3338d06194bb7a94446': 'year',
|
||||
'137bcb84f52bbd48623c37d8dfdebdff': 'Within a year',
|
||||
'279d93f2d745ed08e9034022941510dc': 'Common span',
|
||||
'7a1e5f93e362d371519bcb2bfdb0fc9a': 'Custom Span',
|
||||
'4a12e9b9fc5443e5e9999b5a7c56c19a': 'Default (full)',
|
||||
'2cb472ff9cad0c89a033c53996b52053': 'Init',
|
||||
'76ddcc0ad85aa4be6875b73244a64faf':
|
||||
'Triggered when a component instance is created and inserted into the DOM',
|
||||
'584e4b6108e132be92c9de09d7bbed72': 'Current Data Domain',
|
||||
'9328b90ded33d16a873db5c0dbd815b8':
|
||||
'Initial data interface request successful',
|
||||
'f3b97bd71a77cca1e9288089a537cf3b':
|
||||
'Triggered on successful remote initialization data interface request',
|
||||
'9787088794f42c7e476cf7580f81447e':
|
||||
'Initialize the data returned by a successful data interface request',
|
||||
'029e280e119b028bffc51424d909c07d': 'SelectedItems',
|
||||
'a6eebb9b4fc7148e2dc41335c74e6393':
|
||||
'Initialization of Schema interface request successful',
|
||||
'887954cd9bdb290003984fe9a6eb99e2':
|
||||
'Triggered when remote initialization Schema interface request is successful',
|
||||
'8f0064a9cfd7dcbb3c729f1357f11772': 'Send data',
|
||||
'6d33298a54888a30753373ca5bfe3bc2': 'Return Data',
|
||||
'542e06175ff4f7407c467bbde90de56a':
|
||||
'Turn on this option if you need to do additional data processing on the data in the returned results',
|
||||
'7c583ecdf795ce4f1f40d7960ead9344': 'Default prompt text',
|
||||
'70941a02776496ec446f21f98ebf754e': 'Request successful',
|
||||
'f50bf418323ee425eca7208c09a4577e': 'Request failed'
|
||||
});
|
||||
|
||||
@ -2945,5 +2945,150 @@ extendLocale('zh-CN', {
|
||||
'ecfd82eb65102274188011a502913d3a': '抽屉数据',
|
||||
'951f802ebd0c0d795fbae6767a5ee9b3': '初始化接口请求成功',
|
||||
'da0126992b4937a5fd847ef5366b02e6': '初始化接口请求成功返回的数据',
|
||||
'70b8342d743374233bfee0f56c7f0fc7': '节点示例数据'
|
||||
'70b8342d743374233bfee0f56c7f0fc7': '节点示例数据',
|
||||
'38f85482d657cd4db1280c5efa1950fd': '{{@1}}对齐方式',
|
||||
'0a0574baedb8eb2abf7daf25159d8bb1': '设置子元素在主轴上的对齐方式',
|
||||
'5ccc4c05cd41195f202f550a4c307a64': '设置子元素在交叉轴上的对齐方式',
|
||||
'b1b98c19058af70d8bd499e1899e93bc': '布局容器',
|
||||
'03097563d201ad3a29c79165226764e5':
|
||||
'布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用',
|
||||
'e151c86d57096bb74dcd390ade29362b': '新的一列',
|
||||
'e5f9b3a3655b8daddcee8b97b735887f': '向前插入布局容器',
|
||||
'577b33bf128fba16ed8e9bf7c395f455': '向后插入布局容器',
|
||||
'31f84d1bc6175fd0828a81b5bfd98736': '新增列级元素',
|
||||
'cbc1d00cc640b67ee34a29a694ef162a': '左侧（上侧）插入列级容器',
|
||||
'bb3cc092e17ff83e943554bde3d5771b': '右侧（下侧）插入列级容器',
|
||||
'b19b454fe603e03e98ad9772615c7c32': '定位模式',
|
||||
'8444f01399c0003fbb68eeff1310566c': '指定当前容器元素的定位类型',
|
||||
'5ddea41072a27a74a1715549dfb79bc2': '相对',
|
||||
'e9513a013011450c57cfe3ef51b7d4b0': '固定(相对窗口)',
|
||||
'3059599d8ebfec00a8ab53346d9b4fa3': '绝对(相对父容器)',
|
||||
'86a6b5a0a45bba5b6187cc2277e3375e': '布局位置',
|
||||
'6e72759ed1cbf9f9e8523197dd93888f':
|
||||
'指定当前容器元素的定位位置，用于配置 top、right、bottom、left。',
|
||||
'6896da744f8ae9633263d55af0fceae1': '层级',
|
||||
'6f649980c839dffca1506f20d534fe3d':
|
||||
'指定元素的堆叠顺序，层级高的元素总是会处于较低层级元素的上面。',
|
||||
'a8489cf57d7f44e889aff79434776f47':
|
||||
'默认为块级，可设置为弹性布局模式（flex布局容器）',
|
||||
'4180e30c34190007ffaa654e0959b8a3': '行内弹性布局',
|
||||
'ebe7bde5c9094813e2924473488d281a': '行内块级',
|
||||
'dde193342b8c350ae29795117c0c5b9a': '水平对齐方式',
|
||||
'5b15af1f73b4f2d5bb152410863602f4': '垂直对齐方式',
|
||||
'78d32d2bd35c0262fe77b517c5a4fb62': '排列方向',
|
||||
'3fa460b81736c0360f6f7571801935b1':
|
||||
'设置成水平排列方向，则从左到右放置子项；设置成垂直排列方向，则从上到下放置子项',
|
||||
'fa228d6bec96d052de0ad369407f5241': '水平（起点在右端）',
|
||||
'2df3bc66ab3fcb0de1caf11831eff595': '垂直（起点在下沿）',
|
||||
'98b2fea2d8f3ceb81e9ce32d66383f05': '如何换行',
|
||||
'9af509c2a9636343199b9072e001826c': '默认（不换行）',
|
||||
'd4054144c4341872496e3550fdb1b826': '自动换行（颠倒）',
|
||||
'ee2df1c1a0d99094f641166535948d4b': '弹性模式',
|
||||
'947c03e411c20563c7ac67d0a5ad741b': '设置为弹性模式后，自动适配当前所在区域',
|
||||
'f92626f9e56b3e2d0c47495a446acf71': '弹性宽度',
|
||||
'cf8852316501c22ea19c4e432c59e7d7': '默认宽度',
|
||||
'9cc69c8469b23b77519065d3df381113':
|
||||
'定义在分配多余空间之前，项目占据的主轴空间（main size）',
|
||||
'0ad8b3b736ae5b9e23cf16ac13e1e283': '占比设置',
|
||||
'fa6bb048a2f73975a40789b30c5b8a06':
|
||||
'定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。',
|
||||
'c19b79073b676b9bade80613aba2dbfa': '固定高度',
|
||||
'd1b91a1a24f0d4935c2dd13e6a22b6d4': '最大宽度即当前元素最大的水平展示区域',
|
||||
'c18457fe4f249f06b48297ccfe6224e8': ' x轴滚动模式',
|
||||
'c2ed47a1f0f45cf7e2d22bddffc8a732': '用于设置水平方向的滚动模式',
|
||||
'cbc7af1d6422e88f4b87ade748e0f07d': '超出显示',
|
||||
'b48a90c77b5e792260d830c2d68c527e': '超出隐藏',
|
||||
'ddea62517e2bd1007712689746ebfe00': '滚动显示',
|
||||
'55becc96b40692cc9cf898b331d16976': '自动适配',
|
||||
'ede82efb4a69c35743185c6c73ab771e': '最小宽度即当前元素最小的水平展示区域',
|
||||
'6f420734edfaff00a8210a4c762a9207': '最大高度即当前元素最多的展示高度',
|
||||
'411f9d120093314cd38e6dd5cce398c6': '最小宽度即当前元素最小的垂直展示区域',
|
||||
'ff9e9329fe186be342ef59ee711b9371': ' y轴滚动模式',
|
||||
'b31c6aaa78f8e24df665ce80ab5301e2': '用于设置垂直方向的滚动模式',
|
||||
'4fc0e68b093db41b45a4ea706fbe56f3': '居中显示',
|
||||
'55efb233147f9539de019d9abc7653f9':
|
||||
'通过将设置 margin: 0 auto 来达到居中显示',
|
||||
'2bf5bcbe21f39b254a601664fb8b264d': '默认（自动换行）',
|
||||
'b2d418355cb59a5613ecff7b150c588f': '不换行',
|
||||
'7d1313925f158b747c094a7f2480e535': '参考位置',
|
||||
'41a7494315a528f0f9618646f7e0dddf':
|
||||
'可设置为左上角、右上角、右下角、左下角，默认为右下角',
|
||||
'845c61ac8f51c6702dd22e5657c07e8d': '右下角(默认)',
|
||||
'2794fe303cf8ad4395fe93271fae7925':
|
||||
'布局容器主要用于设计复杂布局的容器组件，基于 CSS Flex 实现的布局效果，比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更简单易用',
|
||||
'abbd790f85282349e2004df9fd494e31':
|
||||
'在分配多余空间之前，其默认占据的主轴空间（main size）',
|
||||
'dbb93e8f413074ead24b6ed822247d98': '上方插入布局容器',
|
||||
'5b5765b3fd7e72e04a5cd3e2ef6218a4': '下方插入布局容器',
|
||||
'ee466872b9a43e720e296813dbc5adee': '{{@1}}插入列级容器',
|
||||
'14c495b1248756310c75396cd41f4fe9': '上方',
|
||||
'e33ac3a4c1a95a02a18f1555038804da': '下方',
|
||||
'e731c52010266b8ade1e7e78e25cdccc': '常见布局',
|
||||
'f80bd0a5546465336f4f9cafdfa8b67f': '默认高度',
|
||||
'ba9ccf1040d7abd0848046330ba3558c': '经典布局',
|
||||
'230d65546ea0d299907943403608233c':
|
||||
'常见布局：经典布局（基于 CSS Flex 实现的布局容器）。',
|
||||
'9bbb7cfaeb34a2b5c095ac253355f028': '悬浮容器',
|
||||
'a3e91631c1a3a43e09526ea7f6b8595c':
|
||||
'常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。',
|
||||
'd423930b823fc45f08c18922b19e4e9e': '吸底容器',
|
||||
'b8b4eb373d8ba6f98271b681fba2511d':
|
||||
'常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。',
|
||||
'faaa6444a709917ff33e0d58948504dc': '吸顶容器',
|
||||
'1facf0bd0f56c66759857345e7434443':
|
||||
'常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。',
|
||||
'f416a3a2566dda04bc0ef67027e6f460': 'x轴滚动容器',
|
||||
'e3d9ad8453925764f2918dbfd6ff824e':
|
||||
'常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。',
|
||||
'053e0cbf18c8fe59b928d52fcd556b88': 'y轴滚动容器',
|
||||
'c9f089cefc06c217c6dddfe2fc772ea3':
|
||||
'常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。',
|
||||
'3587540660a01f8a8aff6a2c0409a404': '开启弹性模式后，自动适配当前所在区域',
|
||||
'2ea6f1f33dec7cb3c23a1bf1f9eab11a': '鼠标点击',
|
||||
'fe9228649853d08eebee72ad5521a3dd': '鼠标点击时触发',
|
||||
'a643d2fe12d205eb8fb5cffe92f62c35': '鼠标悬停时触发',
|
||||
'764c134791952dd1acb0f23587e75421': '切换图例选中状态',
|
||||
'262cd2f688751332c1907a659e686210': '切换图例选中状态时触发',
|
||||
'fd312ae2f1c24b8a14d9412bb3c6bb76': '最近n天',
|
||||
'68cba5f27ab003cfada5eb4c1f29eb21': 'n天以内',
|
||||
'34b06708894a178c440e6f6539e95e9e': '最近n周',
|
||||
'f0e1b8d8a6e731360d7348bc8301d44a': 'n周以内',
|
||||
'5cad2778bb8f01d1a1b1226082eb2117': '最近n月',
|
||||
'ff76f60b3da86a0d2c6663b170a7955a': 'n月以内',
|
||||
'9ff9b56c9ed633ee09396830e93113ad': '最近n季度',
|
||||
'2b80b20008b3ae81136217ae10a1fbaf': 'n季度以内',
|
||||
'84752114d27119dc50d8a7b9ac0b788b': '最近n年',
|
||||
'5df2352afebd73d1f568ebaa81e2db28': 'n年以内',
|
||||
'8572d14f815d840bd9e940cd8ee4e380': '通过键盘上下方向键来加减数据值',
|
||||
'925d31bb30d63576600299475a910c33': '输入内容前展示，不包含在数据值中',
|
||||
'42677544e2cbee28f7e7df216e685543': '输入内容后展示，不包含在数据值中',
|
||||
'046c6233e03af774df7b90b4504fa96c': '最近',
|
||||
'249aba763258bbe488af3e79a381d265': '天',
|
||||
'2f8ab07bea442bc6ce8a9e99ff88e5c1': '天以内',
|
||||
'a657f46f5bb00961adfae80d12e41b3d': '周',
|
||||
'b1599eaa05dc9b3d90be5aebc5c84338': '周以内',
|
||||
'e42b99d59954ce6437e66f416850425a': '月',
|
||||
'3c690347976de82df1909750cbc82b80': '月以内',
|
||||
'b62ba98a627851e911bef8fbb005bd4a': '季度以内',
|
||||
'465260fe80b0c3338d06194bb7a94446': '年',
|
||||
'137bcb84f52bbd48623c37d8dfdebdff': '年以内',
|
||||
'279d93f2d745ed08e9034022941510dc': '常用跨度',
|
||||
'7a1e5f93e362d371519bcb2bfdb0fc9a': '自定义跨度',
|
||||
'4a12e9b9fc5443e5e9999b5a7c56c19a': '默认（占满）',
|
||||
'2cb472ff9cad0c89a033c53996b52053': '初始化',
|
||||
'76ddcc0ad85aa4be6875b73244a64faf': '组件实例被创建并插入 DOM 中时触发',
|
||||
'584e4b6108e132be92c9de09d7bbed72': '当前数据域',
|
||||
'9328b90ded33d16a873db5c0dbd815b8': '初始化数据接口请求成功',
|
||||
'f3b97bd71a77cca1e9288089a537cf3b': '远程初始化数据接口请求成功时触发',
|
||||
'9787088794f42c7e476cf7580f81447e': '初始化数据接口请求成功返回的数据',
|
||||
'029e280e119b028bffc51424d909c07d': '选中的项',
|
||||
'a6eebb9b4fc7148e2dc41335c74e6393': '初始化Schema接口请求成功',
|
||||
'887954cd9bdb290003984fe9a6eb99e2': '远程初始化Schema接口请求成功时触发',
|
||||
'8f0064a9cfd7dcbb3c729f1357f11772': '发送数据',
|
||||
'6d33298a54888a30753373ca5bfe3bc2': '返回数据',
|
||||
'542e06175ff4f7407c467bbde90de56a':
|
||||
'如果需要对返回结果中的data做额外的数据处理，请开启此选项',
|
||||
'7c583ecdf795ce4f1f40d7960ead9344': '默认提示文案',
|
||||
'70941a02776496ec446f21f98ebf754e': '请求成功',
|
||||
'f50bf418323ee425eca7208c09a4577e': '请求失败'
|
||||
});
|
||||
|
||||
@ -39,7 +39,7 @@ export class AudioPlugin extends BasePlugin {
|
||||
tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
|
||||
}
|
||||
: null,
|
||||
getSchemaTpl('audioUrl',{
|
||||
getSchemaTpl('audioUrl', {
|
||||
name: 'src',
|
||||
type: 'input-text',
|
||||
label: '音频地址',
|
||||
|
||||
@ -208,7 +208,6 @@ export class CardPlugin extends BasePlugin {
|
||||
|
||||
fieldWrapperResolve = (dom: HTMLElement) => dom;
|
||||
|
||||
|
||||
overrides = {
|
||||
renderFeild: function (
|
||||
this: any,
|
||||
|
||||
@ -52,10 +52,7 @@ export class Card2Plugin extends BasePlugin {
|
||||
body: [
|
||||
{
|
||||
type: 'button-group-select',
|
||||
label: tipedLabel(
|
||||
'选择区域',
|
||||
'点击触发选中或取消选中的区域'
|
||||
),
|
||||
label: tipedLabel('选择区域', '点击触发选中或取消选中的区域'),
|
||||
name: 'checkOnItemClick',
|
||||
options: [
|
||||
{label: '整个', value: true},
|
||||
|
||||
@ -24,8 +24,7 @@ export class CarouselPlugin extends BasePlugin {
|
||||
image: mockValue({type: 'image'})
|
||||
},
|
||||
{
|
||||
html:
|
||||
'<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
},
|
||||
{
|
||||
image: mockValue({type: 'image'})
|
||||
|
||||
@ -59,7 +59,7 @@ const DEFAULT_EVENT_PARAMS = [
|
||||
},
|
||||
'event.data.value': {
|
||||
type: 'number',
|
||||
title: 'data'
|
||||
title: 'value'
|
||||
},
|
||||
'event.data.color': {
|
||||
type: 'string',
|
||||
@ -108,6 +108,22 @@ export class ChartPlugin extends BasePlugin {
|
||||
|
||||
// 事件定义
|
||||
events: RendererPluginEvent[] = [
|
||||
{
|
||||
eventName: 'init',
|
||||
eventLabel: '初始化',
|
||||
description: '组件实例被创建并插入 DOM 中时触发',
|
||||
dataSchema: [
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
'event.data': {
|
||||
type: 'object',
|
||||
title: '当前数据域'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
eventName: 'click',
|
||||
eventLabel: '鼠标点击',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {BaseEventContext, BasePlugin, RegionConfig} from 'amis-editor-core';
|
||||
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
|
||||
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
|
||||
|
||||
export class ContainerPlugin extends BasePlugin {
|
||||
// 关联渲染器名字
|
||||
@ -17,12 +17,7 @@ export class ContainerPlugin extends BasePlugin {
|
||||
pluginIcon = 'container-plugin';
|
||||
scaffold = {
|
||||
type: 'container',
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '内容'
|
||||
}
|
||||
]
|
||||
body: []
|
||||
};
|
||||
previewSchema = {
|
||||
...this.scaffold
|
||||
@ -40,6 +35,13 @@ export class ContainerPlugin extends BasePlugin {
|
||||
panelJustify = true;
|
||||
|
||||
panelBodyCreator = (context: BaseEventContext) => {
|
||||
const curRendererSchema = context?.schema;
|
||||
const isRowContent =
|
||||
curRendererSchema?.direction === 'row' ||
|
||||
curRendererSchema?.direction === 'row-reverse';
|
||||
const isFlexItem = this.manager?.isFlexItem(context?.id);
|
||||
const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id);
|
||||
|
||||
return getSchemaTpl('tabs', [
|
||||
{
|
||||
title: '属性',
|
||||
@ -74,14 +76,116 @@ export class ContainerPlugin extends BasePlugin {
|
||||
}
|
||||
]
|
||||
},
|
||||
getSchemaTpl('status'),
|
||||
{
|
||||
title: '布局',
|
||||
body: [
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex', {
|
||||
isFlexColumnItem,
|
||||
visibleOn:
|
||||
'data.style && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex-grow', {
|
||||
visibleOn:
|
||||
'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex-basis', {
|
||||
visibleOn:
|
||||
'data.style && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
getSchemaTpl('layout:position'),
|
||||
getSchemaTpl('layout:originPosition'),
|
||||
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"'
|
||||
}),
|
||||
|
||||
getSchemaTpl('layout:isFixedHeight', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:max-height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:min-height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:overflow-y', {
|
||||
visibleOn: `${
|
||||
!isFlexItem || !isFlexColumnItem
|
||||
} && (data.isFixedHeight || data.style && data.style.maxHeight) || (${
|
||||
isFlexItem && isFlexColumnItem
|
||||
} && data.style.flex === '0 0 auto')`
|
||||
}),
|
||||
|
||||
getSchemaTpl('layout:isFixedWidth', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:max-width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:min-width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:overflow-x', {
|
||||
visibleOn: `${
|
||||
!isFlexItem || isFlexColumnItem
|
||||
} && (data.isFixedWidth || data.style && data.style.maxWidth) || (${
|
||||
isFlexItem && !isFlexColumnItem
|
||||
} && data.style.flex === '0 0 auto')`
|
||||
}),
|
||||
|
||||
!isFlexItem ? getSchemaTpl('layout:margin-center') : null
|
||||
]
|
||||
},
|
||||
getSchemaTpl('status')
|
||||
])
|
||||
},
|
||||
{
|
||||
title: '外观',
|
||||
className: 'p-none',
|
||||
body: getSchemaTpl('collapseGroup', [
|
||||
...getSchemaTpl('style:common', [], ['layout']),
|
||||
...getSchemaTpl('style:common', ['layout']),
|
||||
getSchemaTpl('style:classNames', {
|
||||
isFormItem: false,
|
||||
schema: [
|
||||
@ -90,8 +194,7 @@ export class ContainerPlugin extends BasePlugin {
|
||||
label: '内容区'
|
||||
})
|
||||
]
|
||||
}),
|
||||
...getSchemaTpl('style:common', ['layout']),
|
||||
})
|
||||
])
|
||||
}
|
||||
]);
|
||||
|
||||
@ -30,8 +30,7 @@ export class CustomPlugin extends BasePlugin {
|
||||
icon = 'fa fa-gears';
|
||||
scaffold = {
|
||||
type: 'custom',
|
||||
html:
|
||||
'<div>\n<h2>hello, world!</h2>\n<div id="customBox">自定义容器区域</div>\n</div>',
|
||||
html: '<div>\n<h2>hello, world!</h2>\n<div id="customBox">自定义容器区域</div>\n</div>',
|
||||
onMount: `this.renderChild('body', props.body, document.getElementById('customBox'));`,
|
||||
body: [
|
||||
{
|
||||
|
||||
@ -15,7 +15,7 @@ export class DatetimePlugin extends DatePlugin {
|
||||
name = '日期时间展示';
|
||||
isBaseComponent = true;
|
||||
pluginIcon = 'datetime-plugin';
|
||||
|
||||
|
||||
previewSchema = {
|
||||
...this.scaffold,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
|
||||
@ -2,209 +2,13 @@
|
||||
* @file Flex 布局
|
||||
*/
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {
|
||||
BasePlugin,
|
||||
PluginEvent,
|
||||
RegionConfig,
|
||||
RendererJSONSchemaResolveEventContext
|
||||
} from 'amis-editor-core';
|
||||
import {getSchemaTpl} from 'amis-editor-core';
|
||||
import {EditorNodeType} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './Layout/FlexPluginBase';
|
||||
|
||||
export class FlexPlugin extends BasePlugin {
|
||||
// 关联渲染器名字
|
||||
rendererName = 'flex';
|
||||
$schema = '/schemas/FlexSchema.json';
|
||||
disabledRendererPlugin = true;
|
||||
|
||||
// 组件名称
|
||||
name = 'Flex 布局';
|
||||
isBaseComponent = true;
|
||||
icon = 'fa fa-columns';
|
||||
pluginIcon = 'flex-plugin';
|
||||
description = 'flex 布局';
|
||||
docLink = '/amis/zh-CN/components/flex';
|
||||
tags = ['容器'];
|
||||
scaffold = {
|
||||
type: 'flex',
|
||||
items: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
body: '第一列'
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
body: '第二列'
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
body: '第三列'
|
||||
}
|
||||
]
|
||||
};
|
||||
previewSchema = {
|
||||
...this.scaffold
|
||||
};
|
||||
|
||||
panelTitle = 'Flex';
|
||||
panelBody = [
|
||||
getSchemaTpl('tabs', [
|
||||
{
|
||||
title: '属性',
|
||||
className: 'p-none',
|
||||
body: [
|
||||
getSchemaTpl('collapseGroup', [
|
||||
{
|
||||
title: '布局',
|
||||
body: [
|
||||
{
|
||||
name: 'justify',
|
||||
type: 'select',
|
||||
value: 'center',
|
||||
label: '子节点水平分布方式',
|
||||
menuTpl:
|
||||
"<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
|
||||
options: [
|
||||
{
|
||||
label: '起始端对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '末尾端对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（首尾留空）',
|
||||
value: 'space-around'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（首尾对齐）',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（元素等间距）',
|
||||
value: 'space-evenly'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（自动拉伸）',
|
||||
value: 'stretch'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'alignItems',
|
||||
type: 'select',
|
||||
value: 'center',
|
||||
label: '子节点垂直方向位置',
|
||||
menuTpl:
|
||||
"<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
|
||||
options: [
|
||||
{
|
||||
label: '起始端对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '末尾端对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '自动拉伸',
|
||||
value: 'stretch'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'direction',
|
||||
type: 'button-group-select',
|
||||
size: 'sm',
|
||||
label: '布局方向',
|
||||
value: 'row',
|
||||
mode: 'row',
|
||||
options: [
|
||||
{label: '水平', value: 'row'},
|
||||
{label: '垂直', value: 'column'}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '子节点管理',
|
||||
body: [
|
||||
{
|
||||
name: 'items',
|
||||
label: false,
|
||||
type: 'combo',
|
||||
scaffold: {
|
||||
type: 'wrapper',
|
||||
body: '子节点内容'
|
||||
},
|
||||
minLength: 2,
|
||||
multiple: true,
|
||||
// draggable: true,
|
||||
draggableTip: '',
|
||||
items: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl:
|
||||
'<span class="label label-default">子节点${index | plus}</span>'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '外观',
|
||||
className: 'p-none',
|
||||
body: getSchemaTpl('collapseGroup', [
|
||||
...getSchemaTpl('style:common', ['display']),
|
||||
{
|
||||
title: 'CSS 类名',
|
||||
body: [getSchemaTpl('className', {label: '外层CSS类名'})]
|
||||
}
|
||||
])
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
body: [getSchemaTpl('visible'), getSchemaTpl('disabled')]
|
||||
}
|
||||
])
|
||||
];
|
||||
|
||||
regions: Array<RegionConfig> = [
|
||||
{
|
||||
key: 'items',
|
||||
label: '子节点集合',
|
||||
// 复写渲染器里面的 render 方法
|
||||
renderMethod: 'render',
|
||||
dndMode: 'position-h'
|
||||
}
|
||||
];
|
||||
|
||||
afterResolveJsonSchema(
|
||||
event: PluginEvent<RendererJSONSchemaResolveEventContext>
|
||||
) {
|
||||
const context = event.context;
|
||||
const parent = context.node.parent?.host as EditorNodeType;
|
||||
|
||||
if (parent?.info?.plugin === this) {
|
||||
event.setData('/schemas/FlexColumn.json');
|
||||
}
|
||||
}
|
||||
export class FlexPlugin extends FlexPluginBase {
|
||||
name = '布局容器';
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description =
|
||||
'布局容器主要用于设计复杂布局的容器组件，基于 CSS Flex 实现的布局效果，比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更简单易用';
|
||||
}
|
||||
|
||||
registerEditorPlugin(FlexPlugin);
|
||||
|
||||
@ -14,10 +14,7 @@ import {
|
||||
tipedLabel
|
||||
} from 'amis-editor-core';
|
||||
import {ValidatorTag} from '../../validator';
|
||||
import {
|
||||
RendererPluginAction,
|
||||
RendererPluginEvent
|
||||
} from 'amis-editor-core';
|
||||
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
|
||||
import {getEventControlConfig} from '../../renderer/event-control/helper';
|
||||
|
||||
setSchemaTpl('option', {
|
||||
|
||||
@ -14,10 +14,7 @@ import {
|
||||
} from 'amis-editor-core';
|
||||
import {ValidatorTag} from '../../validator';
|
||||
|
||||
import {
|
||||
RendererPluginAction,
|
||||
RendererPluginEvent
|
||||
} from 'amis-editor-core';
|
||||
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
|
||||
import {getEventControlConfig} from '../../renderer/event-control/helper';
|
||||
|
||||
export class CheckboxesControlPlugin extends BasePlugin {
|
||||
|
||||
@ -214,8 +214,8 @@ export class FormPlugin extends BasePlugin {
|
||||
events: RendererPluginEvent[] = [
|
||||
{
|
||||
eventName: 'inited',
|
||||
eventLabel: '初始化接口请求成功',
|
||||
description: '远程初始化接口请求成功时触发',
|
||||
eventLabel: '初始化数据接口请求成功',
|
||||
description: '远程初始化数据接口请求成功时触发',
|
||||
// 表单数据为表单变量
|
||||
dataSchema: [
|
||||
{
|
||||
@ -223,7 +223,7 @@ export class FormPlugin extends BasePlugin {
|
||||
properties: {
|
||||
'event.data': {
|
||||
type: 'object',
|
||||
title: '初始化接口请求成功返回的数据'
|
||||
title: '初始化数据接口请求成功返回的数据'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,10 +11,7 @@ import {
|
||||
SubRendererInfo
|
||||
} from 'amis-editor-core';
|
||||
import {formItemControl} from '../../component/BaseControl';
|
||||
import {
|
||||
RendererPluginAction,
|
||||
RendererPluginEvent
|
||||
} from 'amis-editor-core';
|
||||
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
|
||||
|
||||
export class ExcelControlPlugin extends BasePlugin {
|
||||
// 关联渲染器名字
|
||||
|
||||
@ -190,13 +190,12 @@ export class TableControlPlugin extends BasePlugin {
|
||||
visibleOn: 'data.addable',
|
||||
pipeIn: defaultValue('')
|
||||
},
|
||||
{
|
||||
getSchemaTpl('icon', {
|
||||
name: 'addBtnIcon',
|
||||
label: '增加按钮图标',
|
||||
type: 'icon-picker',
|
||||
className: 'fix-icon-picker-overflow',
|
||||
visibleOn: 'data.addable'
|
||||
},
|
||||
}),
|
||||
getSchemaTpl('api', {
|
||||
name: 'addApi',
|
||||
label: '新增时提交的 API',
|
||||
@ -213,13 +212,12 @@ export class TableControlPlugin extends BasePlugin {
|
||||
visibleOn: 'data.removable',
|
||||
pipeIn: defaultValue('')
|
||||
},
|
||||
{
|
||||
getSchemaTpl('icon', {
|
||||
name: 'deleteBtnIcon',
|
||||
label: '删除按钮图标',
|
||||
type: 'icon-picker',
|
||||
className: 'fix-icon-picker-overflow',
|
||||
visibleOn: 'data.removable'
|
||||
},
|
||||
}),
|
||||
getSchemaTpl('api', {
|
||||
name: 'deleteApi',
|
||||
label: '删除时提交的 API',
|
||||
@ -236,13 +234,12 @@ export class TableControlPlugin extends BasePlugin {
|
||||
visibleOn: 'data.editable',
|
||||
pipeIn: defaultValue('')
|
||||
},
|
||||
{
|
||||
getSchemaTpl('icon', {
|
||||
name: 'editBtnIcon',
|
||||
label: '编辑按钮图标',
|
||||
type: 'icon-picker',
|
||||
className: 'fix-icon-picker-overflow',
|
||||
visibleOn: 'data.editable'
|
||||
},
|
||||
}),
|
||||
getSchemaTpl('switch', {
|
||||
label: '是否可复制',
|
||||
name: 'copyable'
|
||||
@ -254,13 +251,12 @@ export class TableControlPlugin extends BasePlugin {
|
||||
visibleOn: 'data.copyable',
|
||||
pipeIn: defaultValue('')
|
||||
},
|
||||
{
|
||||
getSchemaTpl('icon', {
|
||||
name: 'copyBtnIcon',
|
||||
label: '复制按钮图标',
|
||||
type: 'icon-picker',
|
||||
className: 'fix-icon-picker-overflow',
|
||||
visibleOn: 'data.copyable'
|
||||
},
|
||||
}),
|
||||
getSchemaTpl('api', {
|
||||
name: 'updateApi',
|
||||
label: '修改时提交的 API',
|
||||
@ -273,13 +269,12 @@ export class TableControlPlugin extends BasePlugin {
|
||||
visibleOn: 'data.editable',
|
||||
pipeIn: defaultValue('')
|
||||
},
|
||||
{
|
||||
getSchemaTpl('icon', {
|
||||
name: 'confirmBtnIcon',
|
||||
label: '确认编辑按钮图标',
|
||||
type: 'icon-picker',
|
||||
className: 'fix-icon-picker-overflow',
|
||||
visibleOn: 'data.editable'
|
||||
},
|
||||
}),
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'cancelBtnLabel',
|
||||
@ -287,13 +282,12 @@ export class TableControlPlugin extends BasePlugin {
|
||||
visibleOn: 'data.editable',
|
||||
pipeIn: defaultValue('')
|
||||
},
|
||||
{
|
||||
getSchemaTpl('icon', {
|
||||
name: 'cancelBtnIcon',
|
||||
label: '取消编辑按钮图标',
|
||||
type: 'icon-picker',
|
||||
className: 'fix-icon-picker-overflow',
|
||||
visibleOn: 'data.editable'
|
||||
},
|
||||
}),
|
||||
getSchemaTpl('switch', {
|
||||
label: '是否可拖拽排序',
|
||||
name: 'draggable'
|
||||
|
||||
@ -77,6 +77,10 @@ export class TagControlPlugin extends BasePlugin {
|
||||
type: 'string',
|
||||
title: '选中值'
|
||||
},
|
||||
'event.data.selectedItems': {
|
||||
type: 'array',
|
||||
title: '选中的项'
|
||||
},
|
||||
'event.data.items': {
|
||||
type: 'array',
|
||||
title: '选项集合'
|
||||
|
||||
@ -68,6 +68,10 @@ export class RadiosControlPlugin extends BasePlugin {
|
||||
type: 'string',
|
||||
title: '选中值'
|
||||
},
|
||||
'event.data.selectedItems': {
|
||||
type: 'object',
|
||||
title: '选中的项'
|
||||
},
|
||||
'event.data.items': {
|
||||
type: 'array',
|
||||
title: '选项集合'
|
||||
|
||||
@ -68,6 +68,10 @@ export class SelectControlPlugin extends BasePlugin {
|
||||
type: 'string',
|
||||
title: '选中值'
|
||||
},
|
||||
'event.data.selectedItems': {
|
||||
type: 'object', // 也可能是array
|
||||
title: '选中的项'
|
||||
},
|
||||
'event.data.items': {
|
||||
type: 'array',
|
||||
title: '选项集合'
|
||||
|
||||
313
packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
Normal file
313
packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
Normal file
@ -0,0 +1,313 @@
|
||||
/**
|
||||
* @file Flex 常见布局 1:3
|
||||
*/
|
||||
import {BasePlugin, PluginEvent} from 'amis-editor-core';
|
||||
import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
|
||||
import type {
|
||||
BaseEventContext,
|
||||
EditorNodeType,
|
||||
RegionConfig,
|
||||
RendererJSONSchemaResolveEventContext,
|
||||
BasicToolbarItem
|
||||
} from 'amis-editor-core';
|
||||
|
||||
// 默认的列容器Schema
|
||||
const defaultFlexColumnSchema = (title: string) => {
|
||||
return {
|
||||
type: 'wrapper',
|
||||
body: [],
|
||||
size: 'xs',
|
||||
style: {
|
||||
position: 'static',
|
||||
display: 'flex',
|
||||
flex: '1 1 auto',
|
||||
flexGrow: 1,
|
||||
flexBasis: 'auto',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch'
|
||||
},
|
||||
isFixedHeight: false,
|
||||
isFixedWidth: false
|
||||
};
|
||||
};
|
||||
// 默认的布局容器Schema
|
||||
const defaultFlexContainerSchema = {
|
||||
type: 'flex',
|
||||
className: 'p-1',
|
||||
items: [
|
||||
defaultFlexColumnSchema('第一列'),
|
||||
defaultFlexColumnSchema('第二列'),
|
||||
defaultFlexColumnSchema('第三列')
|
||||
],
|
||||
justify: 'flex-start',
|
||||
alignItems: 'stretch'
|
||||
};
|
||||
|
||||
export class FlexPluginBase extends BasePlugin {
|
||||
rendererName = 'flex';
|
||||
$schema = '/schemas/FlexSchema.json';
|
||||
disabledRendererPlugin = false;
|
||||
|
||||
name = '布局容器';
|
||||
order = -1200;
|
||||
isBaseComponent = true;
|
||||
icon = 'fa fa-columns';
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description =
|
||||
'布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用';
|
||||
docLink = '/amis/zh-CN/components/flex';
|
||||
tags = ['常见布局'];
|
||||
scaffold: any = defaultFlexContainerSchema;
|
||||
previewSchema = {
|
||||
...this.scaffold
|
||||
};
|
||||
|
||||
panelTitle = 'Flex';
|
||||
|
||||
panelJustify = true; // 右侧配置项默认左右展示
|
||||
|
||||
panelBodyCreator = (context: BaseEventContext) => {
|
||||
const curRendererSchema = context?.schema;
|
||||
const isRowContent =
|
||||
curRendererSchema?.direction === 'row' ||
|
||||
curRendererSchema?.direction === 'row-reverse';
|
||||
const isFlexItem = this.manager?.isFlexItem(context?.id);
|
||||
const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id);
|
||||
|
||||
return [
|
||||
getSchemaTpl('tabs', [
|
||||
{
|
||||
title: '属性',
|
||||
className: 'p-none',
|
||||
body: [
|
||||
getSchemaTpl('collapseGroup', [
|
||||
{
|
||||
title: '布局',
|
||||
body: [
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex', {
|
||||
isFlexColumnItem,
|
||||
visibleOn:
|
||||
'data.style && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex-grow', {
|
||||
visibleOn:
|
||||
'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex-basis', {
|
||||
label: isFlexColumnItem ? '默认高度' : '默认宽度',
|
||||
visibleOn:
|
||||
'data.style && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
getSchemaTpl('layout:position'),
|
||||
getSchemaTpl('layout:originPosition'),
|
||||
getSchemaTpl('layout:inset', {
|
||||
mode: 'vertical'
|
||||
}),
|
||||
getSchemaTpl('layout:z-index'),
|
||||
getSchemaTpl('layout:flexDirection', {
|
||||
name: 'direction'
|
||||
}),
|
||||
|
||||
getSchemaTpl('layout:justifyContent', {
|
||||
name: 'justify',
|
||||
label: '水平对齐方式',
|
||||
visibleOn:
|
||||
'data.direction === "row" || data.direction === "row-reverse"'
|
||||
}),
|
||||
// 备注: 重复一个是为了能实时联动，后续需要amis优化，支持label使用公式表达式
|
||||
getSchemaTpl('layout:justifyContent', {
|
||||
name: 'justify',
|
||||
label: '垂直对齐方式',
|
||||
visibleOn:
|
||||
'data.direction === "column" || data.direction === "column-reverse"'
|
||||
}),
|
||||
getSchemaTpl('layout:alignItems', {
|
||||
name: 'alignItems',
|
||||
label: '水平对齐方式',
|
||||
visibleOn:
|
||||
'data.direction === "column" || data.direction === "column-reverse"'
|
||||
}),
|
||||
getSchemaTpl('layout:alignItems', {
|
||||
name: 'alignItems',
|
||||
label: '垂直对齐方式',
|
||||
visibleOn:
|
||||
'data.direction === "row" || data.direction === "row-reverse"'
|
||||
}),
|
||||
getSchemaTpl('layout:flex-wrap'),
|
||||
|
||||
getSchemaTpl('layout:isFixedHeight', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:max-height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:min-height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:overflow-y', {
|
||||
visibleOn: `${
|
||||
!isFlexItem || !isFlexColumnItem
|
||||
} && (data.isFixedHeight || data.style && data.style.maxHeight) || (${
|
||||
isFlexItem && isFlexColumnItem
|
||||
} && data.style.flex === '0 0 auto')`
|
||||
}),
|
||||
|
||||
getSchemaTpl('layout:isFixedWidth', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:max-width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:min-width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:overflow-x', {
|
||||
visibleOn: `${
|
||||
!isFlexItem || isFlexColumnItem
|
||||
} && (data.isFixedWidth || data.style && data.style.maxWidth) || (${
|
||||
isFlexItem && !isFlexColumnItem
|
||||
} && data.style.flex === '0 0 auto')`
|
||||
}),
|
||||
|
||||
!isFlexItem ? getSchemaTpl('layout:margin-center') : null
|
||||
]
|
||||
},
|
||||
getSchemaTpl('status')
|
||||
])
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '外观',
|
||||
className: 'p-none',
|
||||
body: getSchemaTpl('collapseGroup', [
|
||||
...getSchemaTpl('style:common', ['display']),
|
||||
{
|
||||
title: 'CSS 类名',
|
||||
body: [getSchemaTpl('className', {label: '外层CSS类名'})]
|
||||
}
|
||||
])
|
||||
}
|
||||
])
|
||||
];
|
||||
};
|
||||
|
||||
regions: Array<RegionConfig> = [
|
||||
{
|
||||
key: 'items',
|
||||
label: '子节点集合'
|
||||
}
|
||||
];
|
||||
|
||||
buildEditorToolbar(
|
||||
{id, info, schema}: BaseEventContext,
|
||||
toolbars: Array<BasicToolbarItem>
|
||||
) {
|
||||
const store = this.manager.store;
|
||||
const parent = store.getSchemaParentById(id);
|
||||
const draggableContainer = this.manager.draggableContainer(id);
|
||||
const isFlexItem = this.manager?.isFlexItem(id);
|
||||
const isFlexColumnItem = this.manager?.isFlexColumnItem(id);
|
||||
const newColumnSchema = defaultFlexColumnSchema('新的一列');
|
||||
|
||||
if (
|
||||
parent &&
|
||||
(info.renderer?.name === 'flex' || info.renderer?.name === 'container') &&
|
||||
!isFlexItem && // 备注：如果是列级元素就不需要显示了
|
||||
!draggableContainer
|
||||
) {
|
||||
// 非特殊布局元素（fixed、absolute）支持前后插入追加布局元素功能icon
|
||||
toolbars.push(
|
||||
{
|
||||
iconSvg: 'add-btn',
|
||||
tooltip: '上方插入布局容器',
|
||||
level: 'special',
|
||||
placement: 'right',
|
||||
className: 'ae-InsertBefore is-vertical',
|
||||
onClick: () =>
|
||||
this.manager.appendSiblingSchema(
|
||||
defaultFlexContainerSchema,
|
||||
true,
|
||||
true
|
||||
)
|
||||
},
|
||||
{
|
||||
iconSvg: 'add-btn',
|
||||
tooltip: '下方插入布局容器',
|
||||
level: 'special',
|
||||
placement: 'right',
|
||||
className: 'ae-InsertAfter is-vertical',
|
||||
onClick: () =>
|
||||
this.manager.appendSiblingSchema(
|
||||
defaultFlexContainerSchema,
|
||||
false,
|
||||
true
|
||||
)
|
||||
}
|
||||
);
|
||||
|
||||
// 布局容器 右上角插入子元素
|
||||
if (info.renderer?.name === 'flex') {
|
||||
toolbars.push({
|
||||
iconSvg: 'add-btn',
|
||||
tooltip: '新增列级元素',
|
||||
level: 'special',
|
||||
placement: 'bottom',
|
||||
className: 'ae-AppendChild',
|
||||
onClick: () => this.manager.addElem(newColumnSchema)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (isFlexItem && !draggableContainer) {
|
||||
// 布局容器的列级元素 增加左右插入icon
|
||||
toolbars.push(
|
||||
{
|
||||
iconSvg: 'add-btn',
|
||||
tooltip: `${isFlexColumnItem ? '上方' : '左侧'}插入列级容器`,
|
||||
level: 'special',
|
||||
placement: 'right',
|
||||
className: isFlexColumnItem
|
||||
? 'ae-InsertBefore is-vertical'
|
||||
: 'ae-InsertBefore',
|
||||
onClick: () =>
|
||||
this.manager.appendSiblingSchema(newColumnSchema, true, true)
|
||||
},
|
||||
{
|
||||
iconSvg: 'add-btn',
|
||||
tooltip: `${isFlexColumnItem ? '下方' : '右侧'}插入列级容器`,
|
||||
level: 'special',
|
||||
placement: isFlexColumnItem ? 'right' : 'left',
|
||||
className: isFlexColumnItem
|
||||
? 'ae-InsertAfter is-vertical'
|
||||
: 'ae-InsertAfter',
|
||||
onClick: () =>
|
||||
this.manager.appendSiblingSchema(newColumnSchema, false, true)
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
afterResolveJsonSchema(
|
||||
event: PluginEvent<RendererJSONSchemaResolveEventContext>
|
||||
) {
|
||||
const context = event.context;
|
||||
const parent = context.node.parent?.host as EditorNodeType;
|
||||
|
||||
if (parent?.info?.plugin === this) {
|
||||
event.setData('/schemas/FlexColumn.json');
|
||||
}
|
||||
}
|
||||
}
|
||||
110
packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx
Normal file
110
packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export default class Layout1_2_v4 extends FlexPluginBase {
|
||||
name = '经典布局';
|
||||
isBaseComponent = true;
|
||||
pluginIcon = 'layout-3-1-plugin';
|
||||
description = '常见布局：经典布局（基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 307;
|
||||
scaffold: any = {
|
||||
type: 'flex',
|
||||
className: 'p-1',
|
||||
items: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'flex',
|
||||
items: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '250px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'flex',
|
||||
items: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 1,
|
||||
display: 'block'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 1,
|
||||
display: 'block'
|
||||
}
|
||||
}
|
||||
],
|
||||
style: {
|
||||
position: 'static',
|
||||
overflowX: 'auto',
|
||||
overflowY: 'auto',
|
||||
margin: '0',
|
||||
flex: '1 1 auto',
|
||||
flexGrow: 1,
|
||||
flexBasis: 'auto'
|
||||
},
|
||||
alignItems: 'stretch',
|
||||
direction: 'column',
|
||||
justify: 'center',
|
||||
isFixedHeight: false,
|
||||
isFixedWidth: false
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
overflowX: 'auto',
|
||||
margin: '0',
|
||||
maxWidth: 'auto',
|
||||
overflowY: 'auto',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
width: 'auto',
|
||||
maxHeight: 'auto',
|
||||
minHeight: '300px'
|
||||
},
|
||||
direction: 'row',
|
||||
justify: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
isFixedHeight: false,
|
||||
isFixedWidth: false
|
||||
}
|
||||
],
|
||||
direction: 'column',
|
||||
justify: 'center',
|
||||
alignItems: 'stretch'
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout1_2_v4);
|
||||
30
packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx
Normal file
30
packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export default class Layout_fixed extends FlexPluginBase {
|
||||
name = '悬浮容器';
|
||||
isBaseComponent = true;
|
||||
pluginIcon = 'layout-fixed-plugin';
|
||||
description = '常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 503;
|
||||
scaffold: any = {
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
position: 'fixed',
|
||||
inset: 'auto 50px 50px auto',
|
||||
zIndex: 10,
|
||||
display: 'flex',
|
||||
minWidth: '80px',
|
||||
minHeight: '80px',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch'
|
||||
},
|
||||
originPosition: 'right-bottom'
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout_fixed);
|
||||
@ -0,0 +1,77 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export default class Layout_fixed_bottom extends FlexPluginBase {
|
||||
name = '吸底容器';
|
||||
isBaseComponent = true;
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description = '常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 501;
|
||||
scaffold: any = {
|
||||
type: 'flex',
|
||||
className: 'p-1',
|
||||
items: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch'
|
||||
}
|
||||
}
|
||||
],
|
||||
style: {
|
||||
position: 'fixed',
|
||||
inset: 'auto auto 0 0',
|
||||
zIndex: 2,
|
||||
width: '100%',
|
||||
overflowX: 'auto',
|
||||
margin: '0',
|
||||
overflowY: 'auto',
|
||||
height: 'auto'
|
||||
},
|
||||
isFixedWidth: true,
|
||||
direction: 'row',
|
||||
justify: 'center',
|
||||
alignItems: 'stretch',
|
||||
isFixedHeight: false,
|
||||
originPosition: 'right-bottom'
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout_fixed_bottom);
|
||||
67
packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx
Normal file
67
packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export default class Layout_fixed_top extends FlexPluginBase {
|
||||
name = '吸顶容器';
|
||||
isBaseComponent = true;
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description = '常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 502;
|
||||
scaffold: any = {
|
||||
type: 'flex',
|
||||
className: 'p-1',
|
||||
items: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 1,
|
||||
display: 'block'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 1,
|
||||
display: 'block'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '1 1 auto',
|
||||
display: 'block',
|
||||
flexBasis: 'auto',
|
||||
flexGrow: 1
|
||||
}
|
||||
}
|
||||
],
|
||||
style: {
|
||||
position: 'fixed',
|
||||
inset: '0 auto auto 0',
|
||||
zIndex: 10,
|
||||
width: '100%',
|
||||
overflowX: 'auto',
|
||||
margin: '0',
|
||||
overflowY: 'auto'
|
||||
},
|
||||
isFixedWidth: true,
|
||||
direction: 'row',
|
||||
justify: 'center',
|
||||
alignItems: 'stretch',
|
||||
isFixedHeight: false,
|
||||
originPosition: 'right-bottom'
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout_fixed_top);
|
||||
146
packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx
Normal file
146
packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx
Normal file
@ -0,0 +1,146 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export default class Layout_scroll_x extends FlexPluginBase {
|
||||
name = 'x轴滚动容器';
|
||||
isBaseComponent = true;
|
||||
pluginIcon = 'layout-3cols-plugin';
|
||||
description = '常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 505;
|
||||
scaffold: any = {
|
||||
type: 'flex',
|
||||
className: 'p-1',
|
||||
items: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '200px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '200px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto',
|
||||
flexBasis: '200px'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '200px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '200px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '200px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '200px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
}
|
||||
],
|
||||
direction: 'row',
|
||||
justify: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
style: {
|
||||
position: 'static',
|
||||
minHeight: 'auto',
|
||||
maxWidth: '1080px',
|
||||
minWidth: 'auto',
|
||||
height: '200px',
|
||||
overflowX: 'scroll',
|
||||
overflowY: 'scroll',
|
||||
margin: '0 auto'
|
||||
},
|
||||
isFixedHeight: true,
|
||||
isFixedWidth: false
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout_scroll_x);
|
||||
130
packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx
Normal file
130
packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export default class Layout_scroll_y extends FlexPluginBase {
|
||||
name = 'y轴滚动容器';
|
||||
isBaseComponent = true;
|
||||
pluginIcon = 'layout-3row-plugin';
|
||||
description = '常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 504;
|
||||
scaffold: any = {
|
||||
type: 'flex',
|
||||
className: 'p-1',
|
||||
items: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '60px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '60px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '60px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '60px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '60px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'xs',
|
||||
body: [],
|
||||
style: {
|
||||
flex: '0 0 auto',
|
||||
flexBasis: '60px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
position: 'static',
|
||||
minWidth: 'auto',
|
||||
minHeight: 'auto'
|
||||
}
|
||||
}
|
||||
],
|
||||
direction: 'column',
|
||||
justify: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
style: {
|
||||
position: 'static',
|
||||
minHeight: 'auto',
|
||||
maxWidth: 'auto',
|
||||
minWidth: 'auto',
|
||||
height: '200px',
|
||||
width: 'auto',
|
||||
overflowX: 'auto',
|
||||
overflowY: 'scroll',
|
||||
margin: '0'
|
||||
},
|
||||
isFixedHeight: true,
|
||||
isFixedWidth: false
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout_scroll_y);
|
||||
@ -49,16 +49,32 @@ export class PagePlugin extends BasePlugin {
|
||||
|
||||
events: RendererPluginEvent[] = [
|
||||
{
|
||||
eventName: 'inited',
|
||||
eventLabel: '初始化接口请求成功',
|
||||
description: '远程初始化接口请求成功时触发',
|
||||
eventName: 'init',
|
||||
eventLabel: '初始化',
|
||||
description: '组件实例被创建并插入 DOM 中时触发',
|
||||
dataSchema: [
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
'event.data': {
|
||||
type: 'object',
|
||||
title: '初始化接口请求成功返回的数据'
|
||||
title: '当前数据域'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
eventName: 'inited',
|
||||
eventLabel: '初始化数据接口请求成功',
|
||||
description: '远程初始化数据接口请求成功时触发',
|
||||
dataSchema: [
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
'event.data': {
|
||||
type: 'object',
|
||||
title: '初始化数据接口请求成功返回的数据'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import {Button} from 'amis';
|
||||
import React from 'react';
|
||||
import {EditorNodeType, jsonToJsonSchema, registerEditorPlugin} from 'amis-editor-core';
|
||||
import {
|
||||
EditorNodeType,
|
||||
jsonToJsonSchema,
|
||||
registerEditorPlugin
|
||||
} from 'amis-editor-core';
|
||||
import {BaseEventContext, BasePlugin, RegionConfig} from 'amis-editor-core';
|
||||
import {getSchemaTpl} from 'amis-editor-core';
|
||||
import {getEventControlConfig} from '../renderer/event-control/helper';
|
||||
|
||||
import type {
|
||||
RendererPluginAction,
|
||||
RendererPluginEvent
|
||||
} from 'amis-editor-core';
|
||||
import type {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
|
||||
|
||||
export class ServicePlugin extends BasePlugin {
|
||||
// 关联渲染器名字
|
||||
@ -47,15 +48,31 @@ export class ServicePlugin extends BasePlugin {
|
||||
];
|
||||
|
||||
events: RendererPluginEvent[] = [
|
||||
{
|
||||
eventName: 'init',
|
||||
eventLabel: '初始化',
|
||||
description: '组件实例被创建并插入 DOM 中时触发',
|
||||
dataSchema: [
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
'event.data': {
|
||||
type: 'object',
|
||||
title: '当前数据域'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
eventName: 'fetchInited',
|
||||
eventLabel: 'api 初始化数据',
|
||||
description: 'api 初始化完成'
|
||||
eventLabel: '初始化数据接口请求成功',
|
||||
description: '远程初始化数据接口请求成功时触发'
|
||||
},
|
||||
{
|
||||
eventName: 'fetchSchemaInited',
|
||||
eventLabel: 'schemaApi 初始化数据',
|
||||
description: 'schemaApi 初始化完成'
|
||||
eventLabel: '初始化Schema接口请求成功',
|
||||
description: '远程初始化Schema接口请求成功时触发'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@ -512,16 +512,18 @@ export class TablePlugin extends BasePlugin {
|
||||
title: '显隐',
|
||||
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
|
||||
},
|
||||
isCRUDBody ? null : {
|
||||
title: '事件',
|
||||
className: 'p-none',
|
||||
body: [
|
||||
getSchemaTpl('eventControl', {
|
||||
name: 'onEvent',
|
||||
...getEventControlConfig(this.manager, context)
|
||||
})
|
||||
]
|
||||
}
|
||||
isCRUDBody
|
||||
? null
|
||||
: {
|
||||
title: '事件',
|
||||
className: 'p-none',
|
||||
body: [
|
||||
getSchemaTpl('eventControl', {
|
||||
name: 'onEvent',
|
||||
...getEventControlConfig(this.manager, context)
|
||||
})
|
||||
]
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
@ -89,15 +89,15 @@ export class WizardPlugin extends BasePlugin {
|
||||
events: RendererPluginEvent[] = [
|
||||
{
|
||||
eventName: 'inited',
|
||||
eventLabel: '初始化接口请求成功',
|
||||
description: '远程初始化接口请求成功时触发',
|
||||
eventLabel: '初始化数据接口请求成功',
|
||||
description: '远程初始化数据接口请求成功时触发',
|
||||
dataSchema: [
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
'event.data': {
|
||||
type: 'object',
|
||||
title: '初始化接口请求成功返回的数据'
|
||||
title: '初始化数据接口请求成功返回的数据'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {BasePlugin, RegionConfig, RendererInfo} from 'amis-editor-core';
|
||||
import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
|
||||
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
|
||||
|
||||
export class WrapperPlugin extends BasePlugin {
|
||||
@ -31,97 +31,186 @@ export class WrapperPlugin extends BasePlugin {
|
||||
];
|
||||
|
||||
panelTitle = '包裹';
|
||||
panelBody = [
|
||||
getSchemaTpl('tabs', [
|
||||
{
|
||||
title: '属性',
|
||||
className: 'p-none',
|
||||
body: [
|
||||
getSchemaTpl('collapseGroup', [
|
||||
|
||||
panelJustify = true;
|
||||
|
||||
panelBodyCreator = (context: BaseEventContext) => {
|
||||
const curRendererSchema = context?.schema;
|
||||
const isFlexItem = this.manager?.isFlexItem(context?.id);
|
||||
const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id);
|
||||
|
||||
return [
|
||||
getSchemaTpl('tabs', [
|
||||
{
|
||||
title: '属性',
|
||||
className: 'p-none',
|
||||
body: [
|
||||
getSchemaTpl('collapseGroup', [
|
||||
{
|
||||
title: '布局',
|
||||
body: [
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex', {
|
||||
isFlexColumnItem,
|
||||
visibleOn:
|
||||
'data.style && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex-grow', {
|
||||
visibleOn:
|
||||
'data.style && data.style.flex !== "0 0 auto" && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
isFlexItem
|
||||
? getSchemaTpl('layout:flex-basis', {
|
||||
label: isFlexColumnItem ? '默认高度' : '默认宽度',
|
||||
visibleOn:
|
||||
'data.style && (data.style.position === "static" || data.style.position === "relative")'
|
||||
})
|
||||
: null,
|
||||
getSchemaTpl('layout:position'),
|
||||
getSchemaTpl('layout:originPosition'),
|
||||
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"'
|
||||
}),
|
||||
|
||||
getSchemaTpl('layout:isFixedHeight', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:max-height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:min-height', {
|
||||
visibleOn: `${!isFlexItem || !isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:overflow-y', {
|
||||
visibleOn: `${
|
||||
!isFlexItem || !isFlexColumnItem
|
||||
} && (data.isFixedHeight || data.style && data.style.maxHeight) || (${
|
||||
isFlexItem && isFlexColumnItem
|
||||
} && data.style.flex === '0 0 auto')`
|
||||
}),
|
||||
|
||||
getSchemaTpl('layout:isFixedWidth', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:max-width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:min-width', {
|
||||
visibleOn: `${!isFlexItem || isFlexColumnItem}`
|
||||
}),
|
||||
getSchemaTpl('layout:overflow-x', {
|
||||
visibleOn: `${
|
||||
!isFlexItem || isFlexColumnItem
|
||||
} && (data.isFixedWidth || data.style && data.style.maxWidth) || (${
|
||||
isFlexItem && !isFlexColumnItem
|
||||
} && data.style.flex === '0 0 auto')`
|
||||
}),
|
||||
|
||||
!isFlexItem ? getSchemaTpl('layout:margin-center') : null
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '常用',
|
||||
body: [
|
||||
{
|
||||
label: '内间距',
|
||||
type: 'button-group-select',
|
||||
name: 'size',
|
||||
size: 'xs',
|
||||
mode: 'row',
|
||||
className: 'ae-buttonGroupSelect--justify',
|
||||
options: [
|
||||
{
|
||||
label: '极小',
|
||||
value: 'xs'
|
||||
},
|
||||
{
|
||||
label: '小',
|
||||
value: 'sm'
|
||||
},
|
||||
{
|
||||
label: '默认',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '中',
|
||||
value: 'md'
|
||||
},
|
||||
{
|
||||
label: '大',
|
||||
value: 'lg'
|
||||
},
|
||||
{
|
||||
label: '无',
|
||||
value: 'none'
|
||||
}
|
||||
],
|
||||
pipeIn: defaultValue('')
|
||||
}
|
||||
]
|
||||
},
|
||||
getSchemaTpl('status')
|
||||
])
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '外观',
|
||||
className: 'p-none',
|
||||
body: getSchemaTpl('collapseGroup', [
|
||||
...getSchemaTpl('style:common', ['layout']),
|
||||
{
|
||||
title: '基本',
|
||||
title: 'CSS 类名',
|
||||
body: [
|
||||
{
|
||||
label: '内间距',
|
||||
type: 'button-group-select',
|
||||
name: 'size',
|
||||
size: 'xs',
|
||||
mode: 'row',
|
||||
className: 'ae-buttonGroupSelect--justify',
|
||||
options: [
|
||||
{
|
||||
label: '极小',
|
||||
value: 'xs'
|
||||
},
|
||||
{
|
||||
label: '小',
|
||||
value: 'sm'
|
||||
},
|
||||
{
|
||||
label: '默认',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '中',
|
||||
value: 'md'
|
||||
},
|
||||
{
|
||||
label: '大',
|
||||
value: 'lg'
|
||||
},
|
||||
{
|
||||
label: '无',
|
||||
value: 'none'
|
||||
}
|
||||
],
|
||||
pipeIn: defaultValue('')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '子节点管理',
|
||||
body: [
|
||||
{
|
||||
name: 'body',
|
||||
label: false,
|
||||
type: 'combo',
|
||||
scaffold: {
|
||||
type: 'tpl',
|
||||
tpl: '子节点',
|
||||
inline: false
|
||||
},
|
||||
multiple: true,
|
||||
draggableTip: '',
|
||||
items: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span class="label label-default">子节点${index | plus}</span>'
|
||||
}
|
||||
]
|
||||
}
|
||||
getSchemaTpl('className', {
|
||||
description: '设置样式后，大小设置将无效。',
|
||||
pipeIn: defaultValue('bg-white')
|
||||
})
|
||||
]
|
||||
}
|
||||
])
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '外观',
|
||||
className: 'p-none',
|
||||
body: getSchemaTpl('collapseGroup', [
|
||||
...getSchemaTpl('style:common'),
|
||||
{
|
||||
title: 'CSS 类名',
|
||||
body: [
|
||||
getSchemaTpl('className', {
|
||||
description: '设置样式后，大小设置将无效。',
|
||||
pipeIn: defaultValue('bg-white')
|
||||
})
|
||||
]
|
||||
}
|
||||
])
|
||||
}
|
||||
])
|
||||
];
|
||||
}
|
||||
])
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(WrapperPlugin);
|
||||
|
||||
@ -688,314 +688,272 @@ export default class APIControl extends React.Component<
|
||||
title: 'HTTP配置',
|
||||
tab: [
|
||||
{
|
||||
type: 'fieldSet',
|
||||
title: 'Body',
|
||||
headingClassName: 'ae-ApiControl-title',
|
||||
body: [
|
||||
type: 'switch',
|
||||
label: tipedLabel(
|
||||
'请求头',
|
||||
'可以配置<code>headers</code>对象，添加自定义请求头'
|
||||
),
|
||||
name: 'headers',
|
||||
mode: 'horizontal',
|
||||
className: 'm-b-xs',
|
||||
pipeIn: (value: any) => !!value,
|
||||
pipeOut: (value: any) => (value ? {'': ''} : null)
|
||||
},
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'headers',
|
||||
mode: 'horizontal',
|
||||
syncDefaultValue: false,
|
||||
multiple: true,
|
||||
visibleOn: 'this.headers',
|
||||
items: [
|
||||
{
|
||||
type: 'switch',
|
||||
label: tipedLabel(
|
||||
'发送数据映射',
|
||||
'当没开启数据映射时，发送 API 的时候会发送尽可能多的数据，如果你想自己控制发送的数据，或者需要额外的数据处理，请开启此选项'
|
||||
),
|
||||
name: 'data',
|
||||
mode: 'row',
|
||||
pipeIn: (value: any) => !!value,
|
||||
pipeOut: (value: any) => (value ? {'&': '$$'} : null)
|
||||
},
|
||||
{
|
||||
type: 'combo',
|
||||
syncDefaultValue: false,
|
||||
name: 'data',
|
||||
mode: 'normal',
|
||||
renderLabel: false,
|
||||
visibleOn: 'this.data',
|
||||
descriptionClassName: 'help-block text-xs m-b-none',
|
||||
description:
|
||||
'<p>当没开启数据映射时，发送数据自动切成白名单模式，配置啥发送啥，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>',
|
||||
multiple: true,
|
||||
pipeIn: (value: any) => {
|
||||
if (!isObject(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let arr: Array<any> = [];
|
||||
|
||||
Object.keys(value).forEach(key => {
|
||||
arr.push({
|
||||
key: key || '',
|
||||
value:
|
||||
typeof value[key] === 'string'
|
||||
? value[key]
|
||||
: JSON.stringify(value[key])
|
||||
});
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (!Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
let obj: any = {};
|
||||
|
||||
value.forEach((item: any) => {
|
||||
let key: string = item.key || '';
|
||||
let value: any = item.value;
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (e) {}
|
||||
|
||||
obj[key] = value;
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
items: [
|
||||
type: 'input-text',
|
||||
name: 'key',
|
||||
placeholder: 'Key',
|
||||
unique: true,
|
||||
required: true,
|
||||
options: [
|
||||
{
|
||||
placeholder: 'Key',
|
||||
type: 'input-text',
|
||||
unique: true,
|
||||
name: 'key',
|
||||
required: true
|
||||
label: 'Content-Encoding',
|
||||
value: 'Content-Encoding'
|
||||
},
|
||||
|
||||
{
|
||||
placeholder: 'Value',
|
||||
type: 'ae-DataPickerControl',
|
||||
name: 'value'
|
||||
label: 'Content-Type',
|
||||
value: 'Content-Type'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
label: tipedLabel(
|
||||
'返回结果映射',
|
||||
'如果需要对返回结果做额外的数据处理，请开启此选项'
|
||||
),
|
||||
name: 'responseData',
|
||||
mode: 'row',
|
||||
pipeIn: (value: any) => !!value,
|
||||
pipeOut: (value: any) => (value ? {'&': '$$'} : null)
|
||||
},
|
||||
type: 'input-text',
|
||||
name: 'value',
|
||||
placeholder: 'Value',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
pipeIn: (value: any) => {
|
||||
if (!isObject(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let arr: Array<any> = [];
|
||||
|
||||
Object.keys(value).forEach(key => {
|
||||
arr.push({
|
||||
key: key || '',
|
||||
value:
|
||||
typeof value[key] === 'string'
|
||||
? value[key]
|
||||
: JSON.stringify(value[key])
|
||||
});
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (!Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
let obj: any = {};
|
||||
|
||||
value.forEach((item: any) => {
|
||||
let key: string = item.key || '';
|
||||
let value: any = item.value;
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (e) {}
|
||||
|
||||
obj[key] = value;
|
||||
});
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
label: tipedLabel(
|
||||
'发送数据',
|
||||
'当没开启数据映射时，发送 API 的时候会发送尽可能多的数据，如果你想自己控制发送的数据，或者需要额外的数据处理，请开启此选项'
|
||||
),
|
||||
name: 'data',
|
||||
mode: 'horizontal',
|
||||
pipeIn: (value: any) => !!value,
|
||||
pipeOut: (value: any) => (value ? {'&': '$$'} : null)
|
||||
},
|
||||
{
|
||||
type: 'combo',
|
||||
syncDefaultValue: false,
|
||||
name: 'data',
|
||||
mode: 'horizontal',
|
||||
renderLabel: false,
|
||||
visibleOn: 'this.data',
|
||||
descriptionClassName: 'help-block text-xs m-b-none',
|
||||
description:
|
||||
'<p>当没开启数据映射时，发送数据自动切成白名单模式，配置啥发送啥，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>',
|
||||
multiple: true,
|
||||
pipeIn: (value: any) => {
|
||||
if (!isObject(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let arr: Array<any> = [];
|
||||
|
||||
Object.keys(value).forEach(key => {
|
||||
arr.push({
|
||||
key: key || '',
|
||||
value:
|
||||
typeof value[key] === 'string'
|
||||
? value[key]
|
||||
: JSON.stringify(value[key])
|
||||
});
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (!Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
let obj: any = {};
|
||||
|
||||
value.forEach((item: any) => {
|
||||
let key: string = item.key || '';
|
||||
let value: any = item.value;
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (e) {}
|
||||
|
||||
obj[key] = value;
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'combo',
|
||||
syncDefaultValue: false,
|
||||
name: 'responseData',
|
||||
mode: 'normal',
|
||||
renderLabel: false,
|
||||
visibleOn: 'this.responseData',
|
||||
descriptionClassName: 'help-block text-xs m-b-none',
|
||||
multiple: true,
|
||||
pipeIn: (value: any) => {
|
||||
if (!isObject(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let arr: Array<any> = [];
|
||||
|
||||
Object.keys(value).forEach(key => {
|
||||
arr.push({
|
||||
key: key || '',
|
||||
value:
|
||||
typeof value[key] === 'string'
|
||||
? value[key]
|
||||
: JSON.stringify(value[key])
|
||||
});
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (!Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
let obj: any = {};
|
||||
|
||||
value.forEach((item: any) => {
|
||||
let key: string = item.key || '';
|
||||
let value: any = item.value;
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (e) {}
|
||||
|
||||
obj[key] = value;
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
items: [
|
||||
{
|
||||
placeholder: 'Key',
|
||||
type: 'input-text',
|
||||
unique: true,
|
||||
name: 'key',
|
||||
required: true
|
||||
},
|
||||
|
||||
{
|
||||
placeholder: 'Value',
|
||||
type: 'input-text',
|
||||
name: 'value'
|
||||
}
|
||||
]
|
||||
placeholder: 'Key',
|
||||
type: 'input-text',
|
||||
unique: true,
|
||||
name: 'key',
|
||||
required: true
|
||||
},
|
||||
|
||||
{
|
||||
label: '发送适配器',
|
||||
name: 'requestAdaptor',
|
||||
type: 'js-editor',
|
||||
mode: 'horizontal',
|
||||
horizontal: {justify: true},
|
||||
clasName: 'm-t-sm',
|
||||
allowFullscreen: true,
|
||||
description:
|
||||
'函数签名：(api) => api， 数据在 api.data 中，修改后返回 api 对象。'
|
||||
},
|
||||
{
|
||||
label: '接收适配器',
|
||||
name: 'adaptor',
|
||||
type: 'js-editor',
|
||||
mode: 'horizontal',
|
||||
horizontal: {justify: true},
|
||||
clasName: 'm-t-sm',
|
||||
allowFullscreen: true,
|
||||
description:
|
||||
'函数签名: (payload, response, api) => payload'
|
||||
placeholder: 'Value',
|
||||
type: 'ae-DataPickerControl',
|
||||
name: 'value'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'fieldSet',
|
||||
title: 'Header',
|
||||
headingClassName: 'ae-ApiControl-title',
|
||||
body: [
|
||||
label: '发送适配器',
|
||||
name: 'requestAdaptor',
|
||||
type: 'js-editor',
|
||||
mode: 'horizontal',
|
||||
horizontal: {justify: true},
|
||||
clasName: 'm-t-sm',
|
||||
allowFullscreen: true,
|
||||
description:
|
||||
'函数签名：(api) => api， 数据在 api.data 中，修改后返回 api 对象。'
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
label: tipedLabel(
|
||||
'返回数据',
|
||||
'如果需要对返回结果中的data做额外的数据处理，请开启此选项'
|
||||
),
|
||||
name: 'responseData',
|
||||
mode: 'horizontal',
|
||||
pipeIn: (value: any) => !!value,
|
||||
pipeOut: (value: any) => (value ? {'&': '$$'} : null)
|
||||
},
|
||||
{
|
||||
type: 'combo',
|
||||
syncDefaultValue: false,
|
||||
name: 'responseData',
|
||||
mode: 'horizontal',
|
||||
renderLabel: false,
|
||||
visibleOn: 'this.responseData',
|
||||
descriptionClassName: 'help-block text-xs m-b-none',
|
||||
multiple: true,
|
||||
pipeIn: (value: any) => {
|
||||
if (!isObject(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let arr: Array<any> = [];
|
||||
|
||||
Object.keys(value).forEach(key => {
|
||||
arr.push({
|
||||
key: key || '',
|
||||
value:
|
||||
typeof value[key] === 'string'
|
||||
? value[key]
|
||||
: JSON.stringify(value[key])
|
||||
});
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (!Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
let obj: any = {};
|
||||
|
||||
value.forEach((item: any) => {
|
||||
let key: string = item.key || '';
|
||||
let value: any = item.value;
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (e) {}
|
||||
|
||||
obj[key] = value;
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'switch',
|
||||
label: tipedLabel(
|
||||
'请求头',
|
||||
'可以配置<code>headers</code>对象，添加自定义请求头'
|
||||
),
|
||||
name: 'headers',
|
||||
mode: 'row',
|
||||
className: 'm-b-xs',
|
||||
pipeIn: (value: any) => !!value,
|
||||
pipeOut: (value: any) => (value ? {'': ''} : null)
|
||||
placeholder: 'Key',
|
||||
type: 'input-text',
|
||||
unique: true,
|
||||
name: 'key',
|
||||
required: true
|
||||
},
|
||||
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'headers',
|
||||
mode: 'row',
|
||||
syncDefaultValue: false,
|
||||
multiple: true,
|
||||
visibleOn: 'this.headers',
|
||||
items: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'key',
|
||||
placeholder: 'Key',
|
||||
unique: true,
|
||||
required: true,
|
||||
options: [
|
||||
{
|
||||
label: 'Content-Encoding',
|
||||
value: 'Content-Encoding'
|
||||
},
|
||||
{
|
||||
label: 'Content-Type',
|
||||
value: 'Content-Type'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'value',
|
||||
placeholder: 'Value',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
pipeIn: (value: any) => {
|
||||
if (!isObject(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let arr: Array<any> = [];
|
||||
|
||||
Object.keys(value).forEach(key => {
|
||||
arr.push({
|
||||
key: key || '',
|
||||
value:
|
||||
typeof value[key] === 'string'
|
||||
? value[key]
|
||||
: JSON.stringify(value[key])
|
||||
});
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (!Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
let obj: any = {};
|
||||
|
||||
value.forEach((item: any) => {
|
||||
let key: string = item.key || '';
|
||||
let value: any = item.value;
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (e) {}
|
||||
|
||||
obj[key] = value;
|
||||
});
|
||||
return obj;
|
||||
}
|
||||
placeholder: 'Value',
|
||||
type: 'input-text',
|
||||
name: 'value'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '接收适配器',
|
||||
name: 'adaptor',
|
||||
type: 'js-editor',
|
||||
mode: 'horizontal',
|
||||
horizontal: {justify: true},
|
||||
clasName: 'm-t-sm',
|
||||
allowFullscreen: true,
|
||||
description: '函数签名: (payload, response, api) => payload'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
title: '提示信息',
|
||||
tab: [
|
||||
{
|
||||
label: '默认消息提示',
|
||||
label: '默认提示文案',
|
||||
type: 'combo',
|
||||
name: 'messages',
|
||||
mode: 'normal',
|
||||
multiLine: true,
|
||||
description:
|
||||
messageDesc ||
|
||||
'设置 ajax 默认提示信息，当 ajax 没有返回 msg 信息时有用，如果 ajax 返回携带了 msg 值，则还是以 ajax 返回为主',
|
||||
items: [
|
||||
{
|
||||
label: '获取成功提示',
|
||||
label: '请求成功',
|
||||
type: 'input-text',
|
||||
name: 'fetchSuccess'
|
||||
name: 'success'
|
||||
},
|
||||
|
||||
{
|
||||
label: '获取失败提示',
|
||||
label: '请求失败',
|
||||
type: 'input-text',
|
||||
name: 'fetchFailed'
|
||||
},
|
||||
|
||||
{
|
||||
label: '保存顺序成功提示',
|
||||
type: 'input-text',
|
||||
name: 'saveOrderSuccess'
|
||||
},
|
||||
|
||||
{
|
||||
label: '保存顺序失败提示',
|
||||
type: 'input-text',
|
||||
name: 'saveOrderFailed'
|
||||
},
|
||||
|
||||
{
|
||||
label: '快速保存成功提示',
|
||||
type: 'input-text',
|
||||
name: 'quickSaveSuccess'
|
||||
},
|
||||
|
||||
{
|
||||
label: '快速保存失败提示',
|
||||
type: 'input-text',
|
||||
name: 'quickSaveFailed'
|
||||
name: 'failed'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -163,14 +163,11 @@ export default class TimelineItemControl extends React.Component<
|
||||
placeholder: '请输入',
|
||||
label: '颜色'
|
||||
},
|
||||
{
|
||||
type: 'icon-picker',
|
||||
name: 'icon',
|
||||
getSchemaTpl('icon', {
|
||||
value: props?.['icon'],
|
||||
placeholder: '请输入',
|
||||
clearable: true,
|
||||
description: '',
|
||||
label: '图标',
|
||||
className: 'fix-icon-picker-overflow',
|
||||
pipeIn: (value: any) => value?.icon,
|
||||
pipeOut: (value: any) => {
|
||||
@ -183,7 +180,7 @@ export default class TimelineItemControl extends React.Component<
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
})
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ interface EventControlProps extends FormControlProps {
|
||||
) => void;
|
||||
addBroadcast?: (event: RendererPluginEvent) => void;
|
||||
removeBroadcast?: (eventName: string) => void;
|
||||
getComponents: (action: RendererPluginAction) => ComponentInfo[]; // 当前页面组件树
|
||||
getComponents: (action: any) => ComponentInfo[]; // 当前页面组件树
|
||||
getContextSchemas?: (id?: string, withoutSuper?: boolean) => DataSchema; // 获取上下文
|
||||
actionConfigInitFormatter?: (
|
||||
actionConfig: ActionConfig,
|
||||
|
||||
@ -238,7 +238,7 @@ function BoxBorder({
|
||||
clearable: true,
|
||||
value: value[getKey('border', 'color')],
|
||||
inputClassName: 'ae-border-colorpicker',
|
||||
label: false,
|
||||
label: false
|
||||
},
|
||||
{
|
||||
onChange: changeItem('border', 'color')
|
||||
|
||||
@ -10,6 +10,7 @@ import camelCase from 'lodash/camelCase';
|
||||
import {FormItem} from 'amis';
|
||||
|
||||
import {isNumeric} from 'amis-editor-core';
|
||||
import {isAuto} from '../../util';
|
||||
|
||||
import type {FormControlProps} from 'amis-core';
|
||||
import type {PlainObject} from './types';
|
||||
@ -37,6 +38,7 @@ function BoxModel({
|
||||
// 数字类型或带有合法单位的字符串都支持
|
||||
if (
|
||||
isNumeric(inputValue) ||
|
||||
isAuto(inputValue) ||
|
||||
/^(-?(\d*\.)?\d+)((px)|(em)|(%)|(ex)|(ch)|(rem)|(vw)|(vh)|(vmin)|(vmax)|(cm)|(mm)|(in)|(pt)|(pc))$/.test(
|
||||
inputValue
|
||||
)
|
||||
|
||||
@ -0,0 +1,92 @@
|
||||
/**
|
||||
* @file InsetBoxModel
|
||||
* @description 盒模型控件，支持编辑 top、right、bottom、left
|
||||
*/
|
||||
|
||||
import cx from 'classnames';
|
||||
import React from 'react';
|
||||
import {observer} from 'mobx-react';
|
||||
import camelCase from 'lodash/camelCase';
|
||||
import {FormItem} from 'amis';
|
||||
import {isNumeric} from 'amis-editor-core';
|
||||
import type {FormControlProps} from 'amis-core';
|
||||
import {isAuto} from '../../util';
|
||||
import type {PlainObject} from './types';
|
||||
|
||||
export type Direction = 'left' | 'right' | 'top' | 'bottom';
|
||||
|
||||
function InsetBoxModel({
|
||||
value,
|
||||
onChange
|
||||
}: {
|
||||
value?: PlainObject;
|
||||
onChange: (value: PlainObject) => void;
|
||||
}) {
|
||||
const directions: Direction[] = ['left', 'right', 'top', 'bottom'];
|
||||
|
||||
function handleChange(styleName: string) {
|
||||
return (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
let inputValue = e.target.value;
|
||||
|
||||
if (!inputValue) {
|
||||
onChange({...value, [styleName]: ''});
|
||||
return;
|
||||
}
|
||||
|
||||
// 数字类型或带有合法单位的字符串都支持
|
||||
if (
|
||||
isNumeric(inputValue) ||
|
||||
isAuto(inputValue) ||
|
||||
/^(-?(\d*\.)?\d+)((px)|(em)|(%)|(ex)|(ch)|(rem)|(vw)|(vh)|(vmin)|(vmax)|(cm)|(mm)|(in)|(pt)|(pc))$/.test(
|
||||
inputValue
|
||||
)
|
||||
) {
|
||||
onChange({
|
||||
...value,
|
||||
[styleName]: inputValue
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function renderBoxItem(item: string) {
|
||||
return (
|
||||
<>
|
||||
{directions.map((direction: Direction) => {
|
||||
const propsName = camelCase(`${item}-${direction}`);
|
||||
|
||||
return (
|
||||
<input
|
||||
key={propsName}
|
||||
placeholder="0"
|
||||
className={`ae-BoxModel-input ${direction}`}
|
||||
type="text"
|
||||
onChange={handleChange(propsName)}
|
||||
value={value?.[propsName] || ''}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<div className="ae-BoxModel-title">{item.toUpperCase()}</div>
|
||||
{['lt', 'lb', 'rt', 'rb'].map(position => (
|
||||
<div key={position} className={cx('ae-BoxModel-line', position)} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-2 ae-BoxModel">
|
||||
<div className="ae-BoxModel-inner"></div>
|
||||
{renderBoxItem('inset')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(InsetBoxModel);
|
||||
|
||||
@FormItem({type: 'inset-box-model'})
|
||||
export class BoxModelRenderer extends React.Component<FormControlProps> {
|
||||
render() {
|
||||
return <InsetBoxModel {...this.props} />;
|
||||
}
|
||||
}
|
||||
@ -5,5 +5,6 @@ import './api';
|
||||
import './options';
|
||||
import './validations';
|
||||
import './style';
|
||||
import './layout';
|
||||
|
||||
export * from './style';
|
||||
|
||||
1087
packages/amis-editor/src/tpl/layout.tsx
Normal file
1087
packages/amis-editor/src/tpl/layout.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@ -44,12 +44,14 @@ setSchemaTpl(
|
||||
label: '控件',
|
||||
name: 'inputClassName'
|
||||
}),
|
||||
...unsupportStatic ? [] : [
|
||||
getSchemaTpl('className', {
|
||||
label: '表单项静态',
|
||||
name: 'staticClassName'
|
||||
})
|
||||
]
|
||||
...(unsupportStatic
|
||||
? []
|
||||
: [
|
||||
getSchemaTpl('className', {
|
||||
label: '表单项静态',
|
||||
name: 'staticClassName'
|
||||
})
|
||||
])
|
||||
]
|
||||
: [
|
||||
getSchemaTpl('className', {
|
||||
|
||||
281
packages/amis-editor/src/util.ts
Normal file
281
packages/amis-editor/src/util.ts
Normal file
@ -0,0 +1,281 @@
|
||||
import {
|
||||
BaseEventContext,
|
||||
EditorManager,
|
||||
RendererPluginAction
|
||||
} from 'amis-editor-core';
|
||||
import {filterTree, mapTree} from 'amis';
|
||||
import ACTION_TYPE_TREE from './renderer/event-control/actions';
|
||||
import {ActionConfig, ComponentInfo} from './renderer/event-control/types';
|
||||
import {
|
||||
COMMON_ACTION_SCHEMA_MAP,
|
||||
findActionNode,
|
||||
findSubActionNode,
|
||||
FORMITEM_CMPTS,
|
||||
getActionType,
|
||||
getPropOfAcion,
|
||||
hasActionType
|
||||
} from './renderer/event-control/helper';
|
||||
import isString from 'lodash/isString';
|
||||
|
||||
/**
|
||||
* 获取事件动作面板所需属性配置
|
||||
*/
|
||||
export const getEventControlConfig = (
|
||||
manager: EditorManager,
|
||||
context: BaseEventContext
|
||||
) => {
|
||||
// 通用动作配置
|
||||
const commonActions =
|
||||
manager?.config.actionOptions?.customActionGetter?.(manager);
|
||||
// 动作树
|
||||
const actionTree = manager?.config.actionOptions?.actionTreeGetter
|
||||
? manager?.config.actionOptions?.actionTreeGetter(ACTION_TYPE_TREE(manager))
|
||||
: ACTION_TYPE_TREE(manager);
|
||||
const commonActionConfig = {
|
||||
...COMMON_ACTION_SCHEMA_MAP,
|
||||
...commonActions
|
||||
};
|
||||
return {
|
||||
showOldEntry:
|
||||
manager?.config.actionOptions?.showOldEntry !== false &&
|
||||
(!!context.schema.actionType ||
|
||||
['submit', 'reset'].includes(context.schema.type)),
|
||||
actions: manager?.pluginActions,
|
||||
events: manager?.pluginEvents,
|
||||
actionTree,
|
||||
commonActions,
|
||||
owner: '',
|
||||
addBroadcast: manager?.addBroadcast,
|
||||
removeBroadcast: manager?.removeBroadcast,
|
||||
getContextSchemas: async (id?: string, withoutSuper?: boolean) => {
|
||||
const dataSchema = await manager.getContextSchemas(
|
||||
id ?? context!.id,
|
||||
withoutSuper
|
||||
);
|
||||
// 存在指定id时，只需要当前层上下文
|
||||
if (id) {
|
||||
return dataSchema;
|
||||
}
|
||||
return manager.dataSchema;
|
||||
},
|
||||
getComponents: (action: RendererPluginAction) => {
|
||||
const actionType = action.actionType!;
|
||||
const components = filterTree(
|
||||
mapTree(
|
||||
manager?.store?.outline ?? [],
|
||||
(item: any) => {
|
||||
const schema = manager?.store?.getSchema(item.id);
|
||||
return {
|
||||
id: item.id,
|
||||
label: item.label,
|
||||
value: schema?.id ?? item.id,
|
||||
type: schema?.type ?? item.type,
|
||||
schema,
|
||||
disabled: !!item.region,
|
||||
children: item?.children
|
||||
};
|
||||
},
|
||||
1,
|
||||
true
|
||||
),
|
||||
node => {
|
||||
const actions = manager?.pluginActions[node.type];
|
||||
let isSupport = false;
|
||||
if (typeof action.supportComponents === 'string') {
|
||||
isSupport =
|
||||
action.supportComponents === '*' ||
|
||||
action.supportComponents === node.type;
|
||||
} else if (Array.isArray(action.supportComponents)) {
|
||||
isSupport = action.supportComponents.includes(node.type);
|
||||
}
|
||||
if (['reload', 'setValue'].includes(actionType)) {
|
||||
isSupport = hasActionType(actionType, actions);
|
||||
}
|
||||
|
||||
if (actionType === 'component' && !actions?.length) {
|
||||
node.disabled = true;
|
||||
}
|
||||
|
||||
if (isSupport) {
|
||||
return true;
|
||||
} else if (!isSupport && !!node.children?.length) {
|
||||
node.disabled = true;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
1,
|
||||
true
|
||||
);
|
||||
|
||||
return components;
|
||||
},
|
||||
actionConfigInitFormatter: (action: ActionConfig) => {
|
||||
let config = {...action};
|
||||
|
||||
if (
|
||||
['setValue', 'url', 'link'].includes(action.actionType) &&
|
||||
action.args
|
||||
) {
|
||||
const prop = action.actionType === 'setValue' ? 'value' : 'params';
|
||||
!config.args && (config.args = {});
|
||||
if (Array.isArray(action.args[prop])) {
|
||||
config.args[prop] = action.args[prop].reduce(
|
||||
(arr: any, valueItem: any, index: number) => {
|
||||
if (!arr[index]) {
|
||||
arr[index] = {};
|
||||
}
|
||||
arr[index].item = Object.entries(valueItem).map(([key, val]) => ({
|
||||
key,
|
||||
val
|
||||
}));
|
||||
return arr;
|
||||
},
|
||||
[]
|
||||
);
|
||||
} else if (typeof action.args[prop] === 'object') {
|
||||
config.args[prop] = Object.keys(action.args[prop]).map(key => ({
|
||||
key,
|
||||
val: action.args?.[prop][key]
|
||||
}));
|
||||
} else if (
|
||||
action.actionType === 'setValue' &&
|
||||
typeof action.args[prop] === 'string'
|
||||
) {
|
||||
config.args['valueInput'] = config.args['value'];
|
||||
delete config.args?.value;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取动作专有配置参数
|
||||
const innerArgs: any = getPropOfAcion(
|
||||
action,
|
||||
'innerArgs',
|
||||
actionTree,
|
||||
manager.pluginActions,
|
||||
commonActions
|
||||
);
|
||||
|
||||
// 还原args为可视化配置结构(args + addOnArgs)
|
||||
if (config.args) {
|
||||
if (innerArgs) {
|
||||
let tmpArgs = {};
|
||||
config.addOnArgs = [];
|
||||
Object.keys(config.args).forEach(key => {
|
||||
// 筛选出附加配置参数
|
||||
if (!innerArgs.includes(key)) {
|
||||
config.addOnArgs = [
|
||||
...config.addOnArgs,
|
||||
{
|
||||
key: key,
|
||||
val: config.args?.[key]
|
||||
}
|
||||
];
|
||||
} else {
|
||||
tmpArgs = {
|
||||
...tmpArgs,
|
||||
[key]: config.args?.[key]
|
||||
};
|
||||
}
|
||||
});
|
||||
config.args = tmpArgs;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取左侧命中的动作节点
|
||||
const hasSubActionNode = findSubActionNode(actionTree, action.actionType);
|
||||
|
||||
return {
|
||||
...config,
|
||||
actionType: getActionType(action, hasSubActionNode)
|
||||
};
|
||||
},
|
||||
actionConfigSubmitFormatter: (config: ActionConfig) => {
|
||||
let action = {...config};
|
||||
action.__title = findActionNode(
|
||||
actionTree,
|
||||
config.actionType
|
||||
)?.actionLabel;
|
||||
|
||||
// 修正动作名称
|
||||
if (config.actionType === 'component') {
|
||||
// 标记一下组件特性动作
|
||||
action.__isCmptAction = true;
|
||||
action.actionType = config.__cmptActionType;
|
||||
}
|
||||
const hasSubActionNode = findSubActionNode(
|
||||
actionTree,
|
||||
config.__cmptActionType
|
||||
);
|
||||
if (hasSubActionNode) {
|
||||
// 修正动作
|
||||
action.actionType = config.__cmptActionType;
|
||||
}
|
||||
|
||||
// 合并附加的动作参数
|
||||
if (config.addOnArgs) {
|
||||
config.addOnArgs.forEach((args: any) => {
|
||||
action.args = action.args ?? {};
|
||||
action.args = {
|
||||
...action.args,
|
||||
[args.key]: args.val
|
||||
};
|
||||
});
|
||||
delete action.addOnArgs;
|
||||
}
|
||||
// 转换下格式
|
||||
if (['setValue', 'url', 'link'].includes(action.actionType)) {
|
||||
const propName = action.actionType === 'setValue' ? 'value' : 'params';
|
||||
|
||||
if (Array.isArray(config.args?.[propName])) {
|
||||
action.args = action.args ?? {};
|
||||
if (action.__rendererName === 'combo') {
|
||||
// combo特殊处理
|
||||
let tempArr: any = [];
|
||||
config.args?.[propName].forEach((valueItem: any, index: number) => {
|
||||
valueItem.item.forEach((item: any) => {
|
||||
if (!tempArr[index]) {
|
||||
tempArr[index] = {};
|
||||
}
|
||||
tempArr[index][item.key] = item.val;
|
||||
});
|
||||
});
|
||||
action.args = {
|
||||
...action.args,
|
||||
[propName]: tempArr
|
||||
};
|
||||
} else {
|
||||
let tmpObj: any = {};
|
||||
config.args?.[propName].forEach((item: any) => {
|
||||
tmpObj[item.key] = item.val;
|
||||
});
|
||||
action.args = {
|
||||
...action.args,
|
||||
[propName]: tmpObj
|
||||
};
|
||||
}
|
||||
} else if (action.actionType === 'setValue') {
|
||||
// 处理变量赋值非数组的情况
|
||||
action.args = {
|
||||
...action.args,
|
||||
value: config.args?.['valueInput']
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
delete action.config;
|
||||
|
||||
return action;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 布局配置项，数值设置时需要
|
||||
*/
|
||||
export const isAuto = (value: any) => {
|
||||
if (value && isString(value) && /^((a)|(au)|(aut)|(auto))$/.test(value)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
@ -49,7 +49,7 @@ export interface Validator {
|
||||
/**
|
||||
* 快速编辑的表单
|
||||
*/
|
||||
schema?: SchemaObject[];
|
||||
schema?: any[];
|
||||
|
||||
/**
|
||||
* 输入类型，true则表示是默认
|
||||
@ -135,7 +135,7 @@ registerValidator(
|
||||
[ValidatorTag.Email]: ValidTagMatchType.isDefault,
|
||||
[ValidatorTag.Password]: ValidTagMatchType.isDefault,
|
||||
[ValidatorTag.URL]: ValidTagMatchType.isDefault,
|
||||
[ValidatorTag.Tree]: ValidTagMatchType.isDefault,
|
||||
[ValidatorTag.Tree]: ValidTagMatchType.isDefault
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
101
packages/amis-editor/webpack.config.js
Normal file
101
packages/amis-editor/webpack.config.js
Normal file
@ -0,0 +1,101 @@
|
||||
/**
|
||||
* @file webpack 配置文件。
|
||||
*/
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const nodeExternals = require('webpack-node-externals');
|
||||
const path = require('path');
|
||||
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||||
|
||||
module.exports = {
|
||||
mode: 'production', // development production
|
||||
entry: {
|
||||
index: ['./src/index.tsx']
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, 'lib'),
|
||||
filename: '[name].min.js',
|
||||
libraryTarget: 'commonjs'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
declaration: true,
|
||||
outDir: './lib'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/i,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
|
||||
// Creates `style` nodes from JS strings
|
||||
// 'style-loader',
|
||||
// Translates CSS into CommonJS
|
||||
'css-loader',
|
||||
// Compiles Sass to CSS
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
implementation: require('sass'), // `dart-sass` 是首选
|
||||
// webpackImporter: true, // 开启 / 关闭默认的 Webpack importer。默认为true，所以不需要额外配置这个
|
||||
sassOptions: {
|
||||
// 正常情况下不需要这个配置项，但有些情况下需要（比如导入的sass文件包含 media queries等）。
|
||||
includePaths: ['node_modules', '../../node_modules']
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
// Creates `style` nodes from JS strings
|
||||
// 'style-loader',
|
||||
// Translates CSS into CommonJS
|
||||
'css-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
issuer: /\.[jt]sx?$/,
|
||||
use: ['@svgr/webpack']
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
// Options similar to the same options in webpackOptions.output
|
||||
// both options are optional
|
||||
filename: '[name].css',
|
||||
chunkFilename: '[id].css'
|
||||
}),
|
||||
// new BundleAnalyzerPlugin(),
|
||||
{
|
||||
apply(compiler) {
|
||||
compiler.hooks.shouldEmit.tap(
|
||||
'Remove styles from output',
|
||||
compilation => {
|
||||
delete compilation.assets['style.min.js']; // Remove asset. Name of file depends of your entries and
|
||||
return true;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
externals: [
|
||||
nodeExternals({
|
||||
importType: 'commonjs',
|
||||
allowlist: [/^amis\/schemas/],
|
||||
additionalModuleDirs: [path.resolve(__dirname, '../../node_modules')]
|
||||
})
|
||||
]
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user