mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-02-28 04:40:32 +00:00
vision demo 支持 ActionPane
This commit is contained in:
mario.gk
parent
3010ae2b82
commit
5a2bd6f86f
@ -20,13 +20,11 @@
|
||||
"@ali/lowcode-plugin-sample-logo": "^0.8.8",
|
||||
"@ali/lowcode-plugin-sample-preview": "^0.8.11",
|
||||
"@ali/lowcode-plugin-settings-pane": "^0.8.8",
|
||||
"@ali/lowcode-plugin-source-editor": "^0.8.5",
|
||||
"@ali/lowcode-plugin-undo-redo": "^0.8.9",
|
||||
"@ali/lowcode-plugin-variable-bind-dialog": "^0.8.7",
|
||||
"@ali/lowcode-plugin-zh-en": "^0.8.11",
|
||||
"@ali/lowcode-react-renderer": "^0.8.5",
|
||||
"@ali/lowcode-runtime": "^0.8.13",
|
||||
"@ali/lowcode-setters": "^0.8.11",
|
||||
"@ali/lowcode-utils": "^0.8.2",
|
||||
"@ali/ve-action-pane": "^4.7.0-beta.0",
|
||||
"@ali/ve-datapool-pane": "^6.4.3",
|
||||
|
||||
@ -9,7 +9,7 @@ import settingsPane from '@ali/lowcode-plugin-settings-pane';
|
||||
import designer from '@ali/lowcode-plugin-designer';
|
||||
import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
|
||||
import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
|
||||
import sourceEditor from '@ali/lowcode-plugin-source-editor';
|
||||
// import sourceEditor from '@ali/lowcode-plugin-source-editor';
|
||||
export default {
|
||||
LowcodeSkeleton,
|
||||
logo,
|
||||
@ -22,5 +22,5 @@ export default {
|
||||
designer,
|
||||
eventBindDialog,
|
||||
variableBindDialog,
|
||||
sourceEditor
|
||||
// sourceEditor
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { registerSetters } from '@ali/lowcode-setters';
|
||||
// import { registerSetters } from '@ali/lowcode-setters';
|
||||
import config from './config/skeleton';
|
||||
import components from './config/components';
|
||||
import utils from './config/utils';
|
||||
@ -8,7 +8,7 @@ import utils from './config/utils';
|
||||
import './global.scss';
|
||||
import './config/theme.scss';
|
||||
|
||||
registerSetters();
|
||||
// registerSetters();
|
||||
const Skeleton = components.LowcodeSkeleton;
|
||||
const LCE_CONTAINER = document.getElementById('lce-container');
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { createElement } from 'react';
|
||||
import { Button } from '@alifd/next';
|
||||
import Engine, { Panes } from '@ali/visualengine';
|
||||
import { ActionUtil as actionUtil } from '@ali/visualengine-utils';
|
||||
import getTrunkPane from '@ali/ve-trunk-pane';
|
||||
import DatapoolPane from '@ali/ve-datapool-pane';
|
||||
// import I18nPane from '@ali/ve-i18n-pane';
|
||||
@ -259,6 +260,43 @@ function initI18nPane() {
|
||||
|
||||
// 动作面板
|
||||
function initActionPane() {
|
||||
actionUtil.setActions({
|
||||
module: {
|
||||
compiled: "'use strict';\n\nexports.__esModule = true;\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nexports.submit = submit;\nexports.onLoadData = onLoadData;\nexports.add = add;\nexports.edit = edit;\nexports.del = del;\nexports.search = search;\nexports.reset = reset;\n/**\n* 点击弹框的“确认”\n*/\nfunction submit() {\n var _this = this;\n\n this.$('form').submit(function (data, error) {\n if (data) {\n _this.dataSourceMap['table_submit'].load(data).then(function (res) {\n _this.utils.toast({\n type: 'success',\n title: '提交成功'\n });\n _this.$('dialog').hide();\n _this.dataSourceMap['table_list'].load();\n }).catch(function () {\n _this.utils.toast({\n type: 'error',\n title: '提交失败'\n });\n });\n }\n });\n}\n\n/**\n* tablePc onLoadData\n* @param currentPage 当前页码\n* @param pageSize 每页显示条数\n* @param searchKey 搜索关键字\n* @param orderColumn 排序列\n* @param orderType 排序方式（desc,asc）\n* @param from 触发来源（order,search,pagination）\n*/\nfunction onLoadData(currentPage, pageSize, searchKey, orderColumn, orderType, from) {\n var tableParams = {\n currentPage: from === 'search' ? 1 : currentPage,\n pageSize: pageSize,\n searchKey: searchKey,\n orderColumn: orderColumn,\n orderType: orderType\n };\n this.setState({ tableParams: tableParams });\n}\n\n// 点击新增\nfunction add() {\n this.setState({\n formData: null\n });\n this.$('dialog').show();\n}\n\n// 点击编辑\nfunction edit(rowData) {\n this.setState({\n formData: rowData\n });\n this.$('dialog').show();\n}\n\n// 点击删除\nfunction del(rowData) {\n var _this2 = this;\n\n this.utils.dialog({\n method: 'confirm',\n title: '提示',\n content: '确认删除该条目吗？',\n onOk: function onOk() {\n _this2.dataSourceMap['table_delete'].load({ id: rowData.id }).then(function () {\n _this2.utils.toast({\n type: 'success',\n title: '删除成功'\n });\n _this2.dataSourceMap['table_list'].load();\n }).catch(function () {\n _this2.utils.toast({\n type: 'error',\n title: '删除失败'\n });\n });\n }\n });\n}\n\n/**\n* button onClick\n*/\nfunction search() {\n var filterData = this.$('filter').getValue();\n this.setState({\n filterData: filterData,\n tableParams: _extends({}, this.state.tableParams, {\n time: Date.now(),\n currentPage: 1\n })\n });\n}\n\n/**\n* button onClick\n*/\nfunction reset() {\n this.$('filter').reset();\n this.setState({\n filterData: {},\n tableParams: _extends({}, this.state.tableParams, {\n time: Date.now(),\n currentPage: 1\n })\n });\n}",
|
||||
source: "/**\n* 点击弹框的“确认”\n*/\nexport function submit() {\n this.$('form').submit((data, error) => {\n if (data) {\n this.dataSourceMap['table_submit'].load(data).then((res) => {\n this.utils.toast({\n type: 'success',\n title: '提交成功'\n });\n this.$('dialog').hide();\n this.dataSourceMap['table_list'].load();\n }).catch(()=>{\n this.utils.toast({\n type: 'error',\n title: '提交失败'\n });\n })\n }\n })\n}\n\n/**\n* tablePc onLoadData\n* @param currentPage 当前页码\n* @param pageSize 每页显示条数\n* @param searchKey 搜索关键字\n* @param orderColumn 排序列\n* @param orderType 排序方式（desc,asc）\n* @param from 触发来源（order,search,pagination）\n*/\nexport function onLoadData(currentPage, pageSize, searchKey, orderColumn, orderType, from) {\n const tableParams = {\n currentPage: from === 'search' ? 1 : currentPage,\n pageSize,\n searchKey,\n orderColumn,\n orderType\n };\n this.setState({ tableParams });\n}\n\n// 点击新增\nexport function add() {\n this.setState({\n formData: null,\n });\n this.$('dialog').show();\n}\n\n\n// 点击编辑\nexport function edit(rowData) {\n this.setState({\n formData: rowData\n });\n this.$('dialog').show();\n}\n\n// 点击删除\nexport function del(rowData) {\n this.utils.dialog({\n method: 'confirm',\n title: '提示',\n content: '确认删除该条目吗？',\n onOk: () => {\n this.dataSourceMap['table_delete'].load({ id: rowData.id }).then(() => {\n this.utils.toast({\n type: 'success',\n title: '删除成功'\n });\n this.dataSourceMap['table_list'].load();\n }).catch(()=>{\n this.utils.toast({\n type: 'error',\n title: '删除失败'\n });\n })\n }\n })\n}\n\n/**\n* button onClick\n*/\nexport function search(){\n const filterData = this.$('filter').getValue();\n this.setState({\n filterData,\n tableParams: {\n ...this.state.tableParams,\n time: Date.now(),\n currentPage: 1\n }\n });\n}\n\n/**\n* button onClick\n*/\nexport function reset(){\n this.$('filter').reset();\n this.setState({\n filterData: {},\n tableParams: {\n ...this.state.tableParams,\n time: Date.now(),\n currentPage: 1\n }\n });\n}"
|
||||
},
|
||||
type: "FUNCTION",
|
||||
list: [
|
||||
{
|
||||
"id": "submit",
|
||||
"title": "submit"
|
||||
},
|
||||
{
|
||||
"id": "onLoadData",
|
||||
"title": "onLoadData"
|
||||
},
|
||||
{
|
||||
"id": "add",
|
||||
"title": "add"
|
||||
},
|
||||
{
|
||||
"id": "edit",
|
||||
"title": "edit"
|
||||
},
|
||||
{
|
||||
"id": "del",
|
||||
"title": "del"
|
||||
},
|
||||
{
|
||||
"id": "search",
|
||||
"title": "search"
|
||||
},
|
||||
{
|
||||
"id": "reset",
|
||||
"title": "reset"
|
||||
}
|
||||
]
|
||||
});
|
||||
const props = {
|
||||
enableGlobalJS: false,
|
||||
enableVsCodeEdit: false,
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Component } from 'react';
|
||||
import { TipContainer, observer } from '@ali/lowcode-editor-core';
|
||||
import classNames from 'classnames';
|
||||
import { Skeleton } from '../skeleton';
|
||||
import TopArea from './top-area';
|
||||
import LeftArea from './left-area';
|
||||
@ -12,15 +13,15 @@ import RightArea from './right-area';
|
||||
import './workbench.less';
|
||||
|
||||
@observer
|
||||
export class Workbench extends Component<{ skeleton: Skeleton}> {
|
||||
export class Workbench extends Component<{ skeleton: Skeleton, className?: string }> {
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { skeleton } = this.props;
|
||||
const { skeleton, className } = this.props;
|
||||
return (
|
||||
<div className="lc-workbench">
|
||||
<div className={classNames('lc-workbench', className)}>
|
||||
<TopArea area={skeleton.topArea} />
|
||||
<div className="lc-workbench-body">
|
||||
<LeftArea area={skeleton.leftArea} />
|
||||
|
||||
@ -93,6 +93,7 @@ export default class Panel implements IWidget {
|
||||
editor: this.skeleton.editor,
|
||||
config: this.config,
|
||||
panel: this,
|
||||
pane: this,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -159,6 +160,20 @@ export default class Panel implements IWidget {
|
||||
show() {
|
||||
this.setActive(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
getCurrentPosition() {
|
||||
return 'left';
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
getSupportedPositions() {
|
||||
return ['left'];
|
||||
}
|
||||
}
|
||||
|
||||
export function isPanel(obj: any): obj is Panel {
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
"@ali/lowcode-plugin-outline-pane": "^0.8.12",
|
||||
"@ali/lowcode-plugin-undo-redo": "^0.8.9",
|
||||
"@ali/lowcode-plugin-zh-en": "^0.8.11",
|
||||
"@ali/lowcode-setters": "^0.8.11",
|
||||
"@ali/ve-i18n-util": "^2.0.2",
|
||||
"@ali/ve-icons": "^4.1.9",
|
||||
"@ali/ve-less-variables": "2.0.3",
|
||||
|
||||
@ -2,16 +2,16 @@ import { isJSBlock } from '@ali/lowcode-types';
|
||||
import { isPlainObject } from '@ali/lowcode-utils';
|
||||
import { globalContext, Editor } from '@ali/lowcode-editor-core';
|
||||
import { Designer, TransformStage } from '@ali/lowcode-designer';
|
||||
import { registerSetters } from '@ali/lowcode-setters';
|
||||
// import { registerSetters } from '@ali/lowcode-setters';
|
||||
import Outline from '@ali/lowcode-plugin-outline-pane';
|
||||
import DesignerPlugin from '@ali/lowcode-plugin-designer';
|
||||
import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton';
|
||||
|
||||
import Preview from '@ali/lowcode-plugin-sample-preview';
|
||||
import SourceEditor from '@ali/lowcode-plugin-source-editor';
|
||||
// import SourceEditor from '@ali/lowcode-plugin-source-editor';
|
||||
import { i18nReducer } from './i18n-reducer';
|
||||
|
||||
registerSetters();
|
||||
// registerSetters();
|
||||
|
||||
export const editor = new Editor();
|
||||
globalContext.register(editor, Editor);
|
||||
|
||||
@ -35,6 +35,7 @@ function init(container?: Element) {
|
||||
render(
|
||||
createElement(Workbench, {
|
||||
skeleton,
|
||||
className: 'engine-main',
|
||||
}),
|
||||
container,
|
||||
);
|
||||
|
||||
@ -46,6 +46,23 @@ html.engine-blur #engine {
|
||||
-webkit-filter: blur(4px);
|
||||
}
|
||||
|
||||
.engine-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.ve-icon-button {
|
||||
> .ve-icon-contents {
|
||||
color: var(--color-text, rgba(51,51,51,.6));
|
||||
}
|
||||
&:hover, &.active {
|
||||
> .ve-icon-contents {
|
||||
color: var(--color-text-light, rgba(51,51,51,.8));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.engine-empty {
|
||||
background: #f2f3f5;
|
||||
color: #a7b1bd;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user