mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-15 05:36:39 +00:00
run editor & designer
This commit is contained in:
kangwei
parent
a99d64c245
commit
fa1062ace9
@ -1,16 +0,0 @@
|
||||
# EditorConfig is awesome: http://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
# Tab indentation
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
@ -1,8 +0,0 @@
|
||||
.idea/
|
||||
.vscode/
|
||||
.theia/
|
||||
.recore/
|
||||
build/
|
||||
.*
|
||||
~*
|
||||
node_modules
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "./node_modules/@recore/config/.eslintrc"
|
||||
}
|
||||
40
packages/demo/.gitignore
vendored
40
packages/demo/.gitignore
vendored
@ -1,40 +0,0 @@
|
||||
node_modules/
|
||||
coverage/
|
||||
build/
|
||||
dist/
|
||||
.idea/
|
||||
.vscode/
|
||||
.theia/
|
||||
.recore/
|
||||
~*
|
||||
package-lock.json
|
||||
|
||||
# Packages #
|
||||
############
|
||||
# it's better to unpack these files and commit the raw source
|
||||
# git has its own built in compression methods
|
||||
*.7z
|
||||
*.dmg
|
||||
*.gz
|
||||
*.iso
|
||||
*.jar
|
||||
*.rar
|
||||
*.tar
|
||||
*.zip
|
||||
|
||||
# Logs and databases #
|
||||
######################
|
||||
*.log
|
||||
*.sql
|
||||
*.sqlite
|
||||
|
||||
# OS generated files #
|
||||
######################
|
||||
.DS_Store
|
||||
.Trash*
|
||||
*.swp
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
# demo
|
||||
|
||||
A Recore application demo.
|
||||
|
||||
## Recore 文档
|
||||
|
||||
https://yuque.antfin-inc.com/recore/docs
|
||||
|
||||
## DEEP 物料站点
|
||||
|
||||
https://fusion.alibaba-inc.com/deep/
|
||||
|
||||
## 安装运行
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
tnpm install
|
||||
|
||||
# 启动调试
|
||||
npm start
|
||||
|
||||
# 本地构建（一般来说不需要）
|
||||
npm run build
|
||||
|
||||
# 日常部署：将资源发布到日常 CDN
|
||||
npm run deploy
|
||||
|
||||
# 线上部署：将资源发布到线上 CDN
|
||||
npm run deploy:online
|
||||
```
|
||||
|
||||
## 项目发布
|
||||
|
||||
集团的前端项目发布全部收口到 def 工程研发平台，如果之前没有使用过，请先阅读此文档：https://yuque.antfin-inc.com/xux/docs/rmsztg
|
||||
@ -1,12 +0,0 @@
|
||||
{
|
||||
"name": "demo",
|
||||
"assets": {
|
||||
"type": "command",
|
||||
"command": {
|
||||
"cmd": [
|
||||
"tnpm ii",
|
||||
"tnpm run cloud"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
|
||||
<title>demo</title>
|
||||
<link rel="shortcut icon" type="image/png" href="https://img.alicdn.com/tfs/TB1zgoCemrqK1RjSZK9XXXyypXa-96-96.png" />
|
||||
<script src="https://g.alicdn.com/code/lib/??react/16.9.0/umd/react.production.min.js,react-dom/16.9.0/umd/react-dom.production.min.js,prop-types/15.7.2/prop-types.js"></script>
|
||||
<!-- React 非压缩版代码，可根据需要替换或通过代理替换后方便调试 -->
|
||||
<!-- <script src="https://g.alicdn.com/code/lib/??react/16.9.0/umd/react.development.js,react-dom/16.9.0/umd/react-dom.development.js,prop-types/15.7.2/prop-types.js"></script> -->
|
||||
<script> React.PropTypes = PropTypes; </script>
|
||||
<!-- <script src="https://g.alicdn.com/mylib/@ali/recore/1.5.7/umd/recore.min.js"></script>-->
|
||||
<!-- Recore 压缩版代码，线上 VM 请使用下面的地址，注意选择自己需要的版本号 -->
|
||||
<!--<script src="https://gw.alipayobjects.com/os/lib/ali/recore/1.5.3/umd/recore.js"></script>-->
|
||||
<!-- 可选是否导入 mockjs, 可增强 mock 能力 -->
|
||||
<script src="https://g.alicdn.com/code/lib/Mock.js/1.0.0/mock-min.js"></script>
|
||||
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css">
|
||||
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
-webkit-overflow-scrolling : touch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,55 +0,0 @@
|
||||
{
|
||||
"name": "demo",
|
||||
"version": "1.0.0",
|
||||
"description": "A Recore application demo.",
|
||||
"scripts": {
|
||||
"start": "nowa2 start",
|
||||
"build": "nowa2 build",
|
||||
"cloud": "nowa2 build -o",
|
||||
"precommit": "lint-staged",
|
||||
"test": "jest",
|
||||
"upgrade": "nowa2 upgrade",
|
||||
"deploy": "nowa2 deploy",
|
||||
"deploy:online": "nowa2 deploy -o"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.0",
|
||||
"npm": ">=6.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ali/api-loader": "^0.7.8",
|
||||
"@ali/api-runtime": "^0.1.4",
|
||||
"@ali/deep": "1.17.2",
|
||||
"@ali/recore": "^1.5.0",
|
||||
"@alifd/layout": "^0.1.19",
|
||||
"@alife/theme-254": "^0.6.2",
|
||||
"@antv/data-set": "^0.10",
|
||||
"bizcharts": "^3.2",
|
||||
"react": "^16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ali/nowa-recore-solution": "^1.7.0",
|
||||
"@ali/recore-loader": "^2.0.0",
|
||||
"@nowa/cli": "^0.6",
|
||||
"@recore/config": "^2.0.0",
|
||||
"@types/jest": "^21",
|
||||
"@types/node": "^7",
|
||||
"@types/react": "^16",
|
||||
"eslint": "^6.5.1",
|
||||
"husky": "^1.1.2",
|
||||
"jest": "^23.4.1",
|
||||
"lint-staged": "^7.1.2",
|
||||
"tslib": "^1.9.3",
|
||||
"typescript": "^3.1.3",
|
||||
"prettier": "^1.18.2"
|
||||
},
|
||||
"lint-staged": {
|
||||
"./src/**/*.{ts,tsx}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"nowa": {
|
||||
"solution": "@ali/nowa-recore-solution"
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
module.exports = {
|
||||
'[start]': {
|
||||
writeToDisk: true,
|
||||
},
|
||||
'[build]': {},
|
||||
deep: {
|
||||
themeConfig: {},
|
||||
},
|
||||
externals: {
|
||||
'@ali/iceluna-sdk': 'var window.LowCodeRenderer',
|
||||
// '@recore/obx': 'var window.Recore',
|
||||
// '@recore/obx-react': 'var window.Recore',
|
||||
// '@alifd/next': 'var window.Next',
|
||||
'moment': 'var window.moment',
|
||||
},
|
||||
extraEntry: {
|
||||
'simulator-renderer': '../designer/src/builtins/simulator/renderer/index.ts',
|
||||
},
|
||||
vendors: false,
|
||||
};
|
||||
@ -1,12 +0,0 @@
|
||||
.editor {
|
||||
display: flex;
|
||||
}
|
||||
.lc-designer {
|
||||
height: 400px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.lc-settings-main {
|
||||
width: 300px;
|
||||
border-left: 1px solid rgba(31,56,88,.1);
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
import { ViewController } from '@ali/recore';
|
||||
import DesignView from '../../designer/src';
|
||||
import NumberSetter from '../../plugin-setters/number-setter';
|
||||
import SettingsPane, { registerSetter } from '../../plugin-settings-pane/src';
|
||||
import { EventEmitter } from 'events';
|
||||
import { Input } from '@alifd/next';
|
||||
import { createElement } from 'react';
|
||||
|
||||
registerSetter('ClassNameSetter', () => {
|
||||
return createElement('div', {
|
||||
className: 'lc-block-setter'
|
||||
}, '这里是类名绑定');
|
||||
});
|
||||
|
||||
registerSetter('EventsSetter', () => {
|
||||
return createElement('div', {
|
||||
className: 'lc-block-setter'
|
||||
}, '这里是事件设置');
|
||||
});
|
||||
|
||||
registerSetter('StringSetter', { component: Input, props: { placeholder: "请输入" } });
|
||||
|
||||
registerSetter('NumberSetter', NumberSetter as any);
|
||||
|
||||
const emitter = new EventEmitter();
|
||||
|
||||
// 应用入口视图，导航和所有页面复用的 UI 在这里处理
|
||||
export default class App extends ViewController {
|
||||
static components = {
|
||||
DesignView,
|
||||
SettingsPane
|
||||
};
|
||||
|
||||
editor = emitter;
|
||||
|
||||
$didMount() {
|
||||
const designer = this.$refs.d.designer;
|
||||
const pane = this.$refs.pane;
|
||||
(window as any).LCDesigner = designer;
|
||||
(this.editor as any).designer = designer;
|
||||
designer.dragon.from(pane, () => {
|
||||
return {
|
||||
type: 'nodedata',
|
||||
data: {
|
||||
componentName: 'Button',
|
||||
props: {
|
||||
type: 'primary',
|
||||
},
|
||||
children: 'awefawef'
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,663 +0,0 @@
|
||||
<div className="editor">
|
||||
<DesignView
|
||||
eventPipe={editor}
|
||||
defaultSchema={{
|
||||
componentsTree: [
|
||||
{
|
||||
componentName: 'Page',
|
||||
fileName: 'form',
|
||||
props: { style: { paddingTop: 20, paddingRight: 20, paddingLeft: 20 } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { height: '255px' } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Text',
|
||||
props: { text: '内容筛选', style: { fontWeight: 'bold', fontSize: '16px' } },
|
||||
},
|
||||
{
|
||||
componentName: 'Form',
|
||||
props: {
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
marginTop: 10,
|
||||
paddingLeft: 10,
|
||||
textAlign: 'center',
|
||||
float: 'left',
|
||||
minWidth: '900px',
|
||||
},
|
||||
labelTextAlign: 'right',
|
||||
wrapperCol: 12,
|
||||
labelAlign: 'left',
|
||||
inline: false,
|
||||
labelCol: 6,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: {
|
||||
type: 'JSSlot',
|
||||
value: {
|
||||
componentName: 'Fragment',
|
||||
children: '所属应用：'
|
||||
}
|
||||
},
|
||||
// '所属应用：',
|
||||
name: 'appApply',
|
||||
initValue: '22',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
labelTextAlign: 'right',
|
||||
asterisk: false,
|
||||
labelAlign: 'left',
|
||||
size: 'medium',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Input',
|
||||
props: { placeholder: '请输入', size: 'medium', style: { width: '200px' } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '分类ID：',
|
||||
name: 'typeId',
|
||||
initValue: '22',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'NumberPicker',
|
||||
props: { size: 'medium', type: 'normal', style: { width: '200px' } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '标签ID：',
|
||||
name: 'tagId',
|
||||
initValue: '22',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'NumberPicker',
|
||||
props: { size: 'medium', type: 'normal', style: { width: '200px' } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '开始时间：',
|
||||
name: 'startTime',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
},
|
||||
children: [{ componentName: 'TimePicker', props: {} }],
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '结束时间：',
|
||||
name: 'workendTIme',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
},
|
||||
children: [{ componentName: 'TimePicker', props: {} }],
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '尺寸：',
|
||||
name: 'size',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
labelTextAlign: 'right',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
props: {
|
||||
dataSource: [
|
||||
{ label: '教师', value: 't' },
|
||||
{ label: '医生', value: 'd' },
|
||||
{ label: '歌手', value: 's' },
|
||||
],
|
||||
style: { width: '200px' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '删除状态：',
|
||||
name: 'isRemoved',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
props: {
|
||||
dataSource: [
|
||||
{ label: '教师', value: 't' },
|
||||
{ label: '医生', value: 'd' },
|
||||
{ label: '歌手', value: 's' },
|
||||
],
|
||||
style: { width: '200px' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '讨论ID：',
|
||||
name: 'talkId',
|
||||
initValue: '22',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
labelTextAlign: 'right',
|
||||
asterisk: false,
|
||||
labelAlign: 'left',
|
||||
size: 'medium',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Input',
|
||||
props: { placeholder: '请输入', size: 'medium', style: { width: '200px' } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '置顶：',
|
||||
name: 'isTop',
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
width: '33.33%',
|
||||
height: '40px',
|
||||
verticalAlign: 'middle',
|
||||
float: 'left',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
props: {
|
||||
dataSource: [
|
||||
{ label: '教师', value: 't' },
|
||||
{ label: '医生', value: 'd' },
|
||||
{ label: '歌手', value: 's' },
|
||||
],
|
||||
style: { width: '200px' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { display: 'block', width: '100%', textAlign: 'left' } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'ButtonGroup',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: { type: 'normal', style: { margin: '0 5px 0 5px' }, htmlType: 'reset' },
|
||||
children: '重置',
|
||||
},
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: { type: 'primary', style: { margin: '0 5px 0 5px' }, htmlType: 'submit' },
|
||||
children: '确定',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dataSource: {
|
||||
dataHandler: function dataHandler(dataMap) {
|
||||
let dataSource = [
|
||||
{
|
||||
id: 1,
|
||||
title: '2017秋冬新款背带裙复古格子连衣裙清新背心裙a字裙短裙子',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: { edit: true },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '2017秋冬新款 高质感特定纱线欧美宽松马海毛羊毛毛衣',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: { edit: true },
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '日式天然玉米皮草编碗垫锅垫隔热垫茶垫加厚餐垫GD-29',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: { edit: true },
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '2017秋冬新款 绑带腰封设计感超顺滑质感落肩铜氨丝连衣裙',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: { edit: true },
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '日式糖果色陶瓷柄不锈钢餐具西餐牛扒刀叉勺子咖啡勺',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: { edit: true },
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '日式和风深蓝素色文艺餐巾餐垫围裙锅垫隔热手套厨房桌布',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: { edit: true },
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '日式雪点樱花手绘陶瓷餐具米饭碗拉面碗寿司盘子汤碗',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: { edit: true },
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '川岛屋 釉下彩复古日式陶瓷盘子菜盘圆盘调味碟 米饭碗日式餐具',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: { edit: true },
|
||||
},
|
||||
];
|
||||
return { ...dataMap, dataSource };
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Page',
|
||||
fileName: 'list',
|
||||
props: { style: { paddingTop: 20, paddingRight: 20, paddingLeft: 20 } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { height: '90px', lineHeight: '30px' } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { float: 'left' } },
|
||||
children: [
|
||||
{ componentName: 'Text', props: { style: { paddingLeft: 5, cursor: 'pointer' }, text: '最热' } },
|
||||
{
|
||||
componentName: 'Icon',
|
||||
props: {
|
||||
size: 'small',
|
||||
style: { paddingRight: 5, paddingLeft: 5, fontSize: 14, color: '#4a90e2', cursor: 'pointer' },
|
||||
type: 'sorting',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { float: 'left' } },
|
||||
children: [
|
||||
{ componentName: 'Text', props: { text: '最新', style: { paddingLeft: 10, cursor: 'pointer' } } },
|
||||
{
|
||||
componentName: 'Icon',
|
||||
props: {
|
||||
size: 'small',
|
||||
style: {
|
||||
paddingRight: 5,
|
||||
paddingLeft: 5,
|
||||
fontSize: '14px',
|
||||
color: '#9b9b9b',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
type: 'sorting',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { float: 'left' } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Text',
|
||||
props: { text: '距离接稿日期最近', style: { paddingLeft: 10, cursor: 'pointer' } },
|
||||
},
|
||||
{
|
||||
componentName: 'Icon',
|
||||
props: {
|
||||
size: 'small',
|
||||
style: { fontSize: '14px', color: '#9b9b9b', cursor: 'pointer' },
|
||||
type: 'sorting',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { marginTop: 5, marginBottom: 15, borderBottom: '1px solid rgba(244,244,244)' } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { marginBottom: 15 } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Text',
|
||||
props: { text: '{{this.item.title}}', style: { color: 'rgba(51,51,51)' } },
|
||||
},
|
||||
{
|
||||
componentName: 'Text',
|
||||
props: {
|
||||
text: '{{this.item.datetime}}',
|
||||
style: { fontSize: '12px', color: '#666', float: 'right' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { paddingBottom: 15, fontSize: '13px', color: '#666' } },
|
||||
children: '{{this.item.description}}',
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { marginBottom: 15 } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: { type: 'normal', style: { marginRight: 5, marginLeft: 5 }, size: 'small' },
|
||||
children: '{{this.item}}',
|
||||
loop: '{{this.item.tags}}',
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: { style: { marginBottom: 15, float: 'right' } },
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
marginRight: 5,
|
||||
marginBottom: 15,
|
||||
marginLeft: 5,
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
float: 'none',
|
||||
},
|
||||
},
|
||||
children: '{{"点赞："+this.item.star}}',
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
marginRight: 5,
|
||||
marginBottom: 15,
|
||||
marginLeft: 5,
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
float: 'none',
|
||||
},
|
||||
},
|
||||
children: '{{"喜爱："+this.item.like}}',
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
marginRight: 5,
|
||||
marginBottom: 15,
|
||||
marginLeft: 5,
|
||||
fontSize: 12,
|
||||
color: '#66',
|
||||
float: 'none',
|
||||
},
|
||||
},
|
||||
children: '{{"评论："+this.item.comment}}',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
loop: '{{this.state.dataSource}}',
|
||||
},
|
||||
{
|
||||
componentName: 'Pagination',
|
||||
props: {
|
||||
shape: 'normal',
|
||||
type: 'normal',
|
||||
size: 'medium',
|
||||
style: { marginTop: 10, marginBottom: 30, textAlign: 'right' },
|
||||
},
|
||||
},
|
||||
],
|
||||
dataSource: {
|
||||
dataHandler: function dataHandler(dataMap) {
|
||||
const dataSource = [
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100,
|
||||
},
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100,
|
||||
},
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100,
|
||||
},
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100,
|
||||
},
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100,
|
||||
},
|
||||
];
|
||||
return { dataSource };
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
simulatorProps={{
|
||||
componentsAsset: [
|
||||
{
|
||||
type: 'jsUrl',
|
||||
content: 'https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js',
|
||||
id: 'next',
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
type: 'cssUrl',
|
||||
content: 'https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.css',
|
||||
id: 'next',
|
||||
level: 2,
|
||||
},
|
||||
],
|
||||
simulatorUrl: ['/build/simulator-renderer.css', '/build/simulator-renderer.js'],
|
||||
}}
|
||||
componentsDescription={[
|
||||
{
|
||||
description: 'Button',
|
||||
npm: { package: '@ali/deep', subName: 'Button', destructuring: false, exportName: 'Next', version: '1.17.2' },
|
||||
componentName: 'Button',
|
||||
title: 'Button',
|
||||
},
|
||||
]}
|
||||
ref="d"
|
||||
/>
|
||||
|
||||
<SettingsPane editor={editor} />
|
||||
|
||||
</div>
|
||||
<div ref="pane">
|
||||
<a href="afeawef">aewfawfe</a>
|
||||
</div>
|
||||
19
packages/demo/src/module.d.ts
vendored
19
packages/demo/src/module.d.ts
vendored
@ -1,19 +0,0 @@
|
||||
/// <reference types="react" />
|
||||
// tslint:disable
|
||||
|
||||
declare const __mock__: boolean;
|
||||
|
||||
declare module '*.vx' {
|
||||
const RecoreComponent: React.ComponentClass<{ [key: string]: any }>;
|
||||
export default RecoreComponent;
|
||||
}
|
||||
|
||||
declare module '*.svg' {
|
||||
const SvgIcon: React.ComponentClass<any>;
|
||||
export default SvgIcon;
|
||||
}
|
||||
|
||||
declare module '@alifd/layout';
|
||||
declare module '@antv/data-set';
|
||||
declare module '@ali/iceluna-sdk';
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"extends": "./node_modules/@recore/config/tsconfig",
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true
|
||||
},
|
||||
"include": [
|
||||
"./src/",
|
||||
"../src/"
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,30 +0,0 @@
|
||||
html {
|
||||
padding-bottom: 30px;
|
||||
background: transparent !important;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
html.lc-cursor-dragging,
|
||||
html.lc-cursor-dragging * {
|
||||
cursor: move !important;
|
||||
}
|
||||
html.lc-cursor-x-resizing,
|
||||
html.lc-cursor-x-resizing * {
|
||||
cursor: col-resize;
|
||||
}
|
||||
html.lc-cursor-y-resizing,
|
||||
html.lc-cursor-y-resizing * {
|
||||
cursor: row-resize;
|
||||
}
|
||||
html.lc-cursor-copy,
|
||||
html.lc-cursor-copy * {
|
||||
cursor: copy !important;
|
||||
}
|
||||
|
||||
|
||||
/*# sourceMappingURL=simulator-renderer.css.map*/
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -53,9 +53,9 @@ const publicPath = (document.currentScript as HTMLScriptElement).src.replace(/^(
|
||||
const defaultSimulatorUrl = (() => {
|
||||
let urls;
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
urls = [`${publicPath}simulator-renderer.min.css`, `${publicPath}simulator-renderer.min.js`];
|
||||
urls = [`${publicPath}../css/simulator-renderer.min.css`, `${publicPath}simulator-renderer.min.js`];
|
||||
} else {
|
||||
urls = [`${publicPath}simulator-renderer.css`, `${publicPath}simulator-renderer.js`];
|
||||
urls = [`${publicPath}../css/simulator-renderer.css`, `${publicPath}simulator-renderer.js`];
|
||||
}
|
||||
return urls;
|
||||
})();
|
||||
@ -67,8 +67,8 @@ const defaultDepends = [
|
||||
AssetType.JSText,
|
||||
'window.PropTypes=parent.PropTypes;React.PropTypes=parent.PropTypes; window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;',
|
||||
),
|
||||
assetItem(AssetType.JSUrl, 'https://g.alicdn.com/mylib/@ali/recore/1.5.7/umd/recore.min.js'),
|
||||
assetItem(AssetType.JSUrl, '/lowcode-renderer.js'),
|
||||
// assetItem(AssetType.JSUrl, 'https://g.alicdn.com/mylib/@ali/recore/1.5.7/umd/recore.min.js'),
|
||||
assetItem(AssetType.JSUrl, '/statics/lowcode-renderer.js'),
|
||||
];
|
||||
|
||||
export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
@ -132,7 +132,9 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
return autorun(fn as any, true);
|
||||
}
|
||||
|
||||
purge(): void {}
|
||||
purge(): void {
|
||||
// todo
|
||||
}
|
||||
|
||||
readonly viewport = new Viewport();
|
||||
readonly scroller = this.designer.createScroller(this.viewport);
|
||||
@ -225,7 +227,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
const isLeftButton = downEvent.which === 1 || downEvent.button === 0;
|
||||
|
||||
if (isLeftButton) {
|
||||
let node: Node = nodeInst.node;
|
||||
const node: Node = nodeInst.node;
|
||||
let nodes: Node[] = [node];
|
||||
let ignoreUpSelected = false;
|
||||
if (isMulti) {
|
||||
@ -365,7 +367,9 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
/**
|
||||
* @see ISimulator
|
||||
*/
|
||||
getComponentInstanceId(instance: ReactInstance) {}
|
||||
getComponentInstanceId(instance: ReactInstance) {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
|
||||
/**
|
||||
* @see ISimulator
|
||||
@ -493,7 +497,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
}
|
||||
|
||||
const opt: any = {};
|
||||
let scroll = false;
|
||||
const scroll = false;
|
||||
|
||||
if (detail) {
|
||||
// TODO:
|
||||
@ -565,7 +569,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
this.renderer?.clearState();
|
||||
}
|
||||
|
||||
private _sensorAvailable: boolean = true;
|
||||
private _sensorAvailable = true;
|
||||
/**
|
||||
* @see ISensor
|
||||
*/
|
||||
@ -613,7 +617,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
return e.globalY >= rect.top && e.globalY <= rect.bottom && e.globalX >= rect.left && e.globalX <= rect.right;
|
||||
}
|
||||
|
||||
private sensing: boolean = false;
|
||||
private sensing = false;
|
||||
/**
|
||||
* @see ISensor
|
||||
*/
|
||||
@ -674,14 +678,12 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
let maxBottom = null;
|
||||
|
||||
for (let i = 0, l = children.size; i < l; i++) {
|
||||
let node = children.get(i)!;
|
||||
let index = i;
|
||||
const node = children.get(i)!;
|
||||
const index = i;
|
||||
const instances = this.getComponentInstances(node);
|
||||
const inst = instances
|
||||
? instances.length > 1
|
||||
? instances.find(inst => {
|
||||
return this.getClosestNodeInstance(inst, target.id)?.instance === targetInstance;
|
||||
})
|
||||
? instances.find(inst => this.getClosestNodeInstance(inst, target.id)?.instance === targetInstance)
|
||||
: instances[0]
|
||||
: null;
|
||||
const rect = inst ? this.computeComponentInstanceRect(inst) : null;
|
||||
@ -805,8 +807,8 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
} else {
|
||||
container = container.parent;
|
||||
}
|
||||
}
|
||||
/* else if (res === AT_CHILD) {
|
||||
} else if (isNode(res)) {
|
||||
/* else if (res === AT_CHILD) {
|
||||
if (!upward) {
|
||||
upward = container.parent;
|
||||
}
|
||||
@ -816,7 +818,6 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
upward = null;
|
||||
}
|
||||
}*/
|
||||
else if (isNode(res)) {
|
||||
container = res;
|
||||
upward = null;
|
||||
}
|
||||
@ -898,7 +899,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
if (isDragNodeDataObject(dragObject)) {
|
||||
items = Array.isArray(dragObject.data) ? dragObject.data : [dragObject.data];
|
||||
} else {
|
||||
items = dragObject.nodes
|
||||
items = dragObject.nodes;
|
||||
}
|
||||
return items.every(item => this.checkNestingDown(dropTarget, item));
|
||||
}
|
||||
@ -908,7 +909,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
if (isDragNodeDataObject(dragObject)) {
|
||||
items = Array.isArray(dragObject.data) ? dragObject.data : [dragObject.data];
|
||||
} else {
|
||||
items = dragObject.nodes
|
||||
items = dragObject.nodes;
|
||||
}
|
||||
return items.every(item => this.checkNestingUp(dropTarget, item));
|
||||
}
|
||||
@ -931,12 +932,12 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
|
||||
// #endregion
|
||||
}
|
||||
|
||||
|
||||
function isPointInRect(point: CanvasPoint, rect: Rect) {
|
||||
return (
|
||||
point.canvasY >= rect.top &&
|
||||
point.canvasY <= rect.bottom &&
|
||||
(point.canvasX >= rect.left && point.canvasX <= rect.right)
|
||||
point.canvasX >= rect.left &&
|
||||
point.canvasX <= rect.right
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import LowCodeRenderer from '@ali/iceluna-sdk';
|
||||
import LowCodeRenderer from '@ali/lowcode-renderer';
|
||||
import { ReactInstance, Fragment, Component } from 'react';
|
||||
import { observer } from '@recore/obx-react';
|
||||
import { SimulatorRenderer } from './renderer';
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: 'src/index.tsx',
|
||||
entry: {
|
||||
'index': 'src/index.tsx',
|
||||
'simulator-renderer': '../designer/src/builtins/simulator/renderer/index.ts'
|
||||
},
|
||||
"vendor": false,
|
||||
publicPath: './',
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
@ -14,6 +18,16 @@ module.exports = {
|
||||
locales: ['zh-cn'],
|
||||
}],
|
||||
],
|
||||
externals: {
|
||||
'react': 'var window.React',
|
||||
'react-dom': 'var window.ReactDOM',
|
||||
'prop-types': 'var window.PropTypes',
|
||||
// '@recore/obx': 'var window.Recore',
|
||||
// '@recore/obx-react': 'var window.Recore',
|
||||
'@ali/lowcode-renderer': 'var window.LowCodeRenderer',
|
||||
'@alifd/next': 'var window.Next',
|
||||
'moment': 'var window.moment',
|
||||
},
|
||||
chainWebpack: (config) => {
|
||||
// 修改对应 css module的 loader，默认修改 scss-module 同理可以修改 css-module 和 less-module 规则
|
||||
['scss-module'].forEach((rule) => {
|
||||
|
||||
@ -4,7 +4,15 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>ICE TypeScript Starter</title>
|
||||
<title>LowCodeEngine DEMO</title>
|
||||
<script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script>
|
||||
<script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script>
|
||||
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
|
||||
<script> React.PropTypes = PropTypes; </script>
|
||||
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css">
|
||||
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -3,7 +3,8 @@ import React, { PureComponent } from 'react';
|
||||
import Editor from '../../framework/index';
|
||||
import { PluginConfig } from '../../framework/definitions';
|
||||
|
||||
import Designer from '../../../../designer/src/designer/designer-view';
|
||||
// @ts-ignore
|
||||
import Designer from '../../../../designer';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
@ -12,128 +13,154 @@ export interface PluginProps {
|
||||
config: PluginConfig;
|
||||
}
|
||||
|
||||
const SCHEMA = {
|
||||
"componentName": "Page",
|
||||
"fileName": "test",
|
||||
"dataSource": {
|
||||
"list": [{
|
||||
"id": "getComponentsMap",
|
||||
"isInit": true,
|
||||
"type": "doServer",
|
||||
"options": {
|
||||
"method": "POST",
|
||||
"params": {
|
||||
"libVersionIds": "1"
|
||||
},
|
||||
"uri": "getComponentsMap"
|
||||
}
|
||||
}]
|
||||
},
|
||||
"state": {
|
||||
"text": "outter"
|
||||
},
|
||||
"props": {
|
||||
"ref": "outterView",
|
||||
"autoLoading": true
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Form",
|
||||
"props": {
|
||||
"labelCol": 4,
|
||||
"onSubmit": function onSubmit(value, error, field) {
|
||||
//form内有htmlType="submit"的元素的时候会触发
|
||||
alert(JSON.stringify(value))
|
||||
},
|
||||
"style": {},
|
||||
"ref": "testForm"
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "FormItem",
|
||||
"props": {
|
||||
"label": "姓名：",
|
||||
"name": "name",
|
||||
"initValue": "李雷"
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Input",
|
||||
"props": {
|
||||
"placeholder": "请输入",
|
||||
"size": "medium",
|
||||
"style": {
|
||||
"width": 320
|
||||
const SCHEMA = {
|
||||
version: '1.0',
|
||||
componentsMap: [],
|
||||
componentsTree: [
|
||||
{
|
||||
componentName: 'Page',
|
||||
fileName: 'test',
|
||||
dataSource: {
|
||||
list: [
|
||||
{
|
||||
id: 'getComponentsMap',
|
||||
isInit: true,
|
||||
type: 'doServer',
|
||||
options: {
|
||||
method: 'POST',
|
||||
params: {
|
||||
libVersionIds: '1'
|
||||
},
|
||||
uri: 'getComponentsMap'
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "FormItem",
|
||||
"props": {
|
||||
"label": "年龄：",
|
||||
"name": "age",
|
||||
"initValue": "22"
|
||||
]
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "NumberPicker",
|
||||
"props": {
|
||||
"size": "medium",
|
||||
"type": "normal"
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "FormItem",
|
||||
"props": {
|
||||
"label": "职业：",
|
||||
"name": "profession"
|
||||
state: {
|
||||
text: 'outter'
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Select",
|
||||
"props": {
|
||||
"dataSource": [{
|
||||
"label": "教师",
|
||||
"value": "t"
|
||||
}, {
|
||||
"label": "医生",
|
||||
"value": "d"
|
||||
}, {
|
||||
"label": "歌手",
|
||||
"value": "s"
|
||||
}]
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Div",
|
||||
"props": {
|
||||
"style": {
|
||||
"textAlign": "center"
|
||||
}
|
||||
props: {
|
||||
ref: 'outterView',
|
||||
autoLoading: true
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "ButtonGroup",
|
||||
"props": {},
|
||||
"children": [{
|
||||
"componentName": "Button",
|
||||
"props": {
|
||||
"type": "primary",
|
||||
"style": {
|
||||
"margin": "0 5px 0 5px"
|
||||
},
|
||||
"htmlType": "submit"
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form',
|
||||
props: {
|
||||
labelCol: 4,
|
||||
style: {},
|
||||
ref: 'testForm'
|
||||
},
|
||||
"children": "提交"
|
||||
}, {
|
||||
"componentName": "Button",
|
||||
"props": {
|
||||
"type": "normal",
|
||||
"style": {
|
||||
"margin": "0 5px 0 5px"
|
||||
children: [
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '姓名：',
|
||||
name: 'name',
|
||||
initValue: '李雷'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
size: 'medium',
|
||||
style: {
|
||||
width: 320
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"htmlType": "reset"
|
||||
},
|
||||
"children": "重置"
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '年龄：',
|
||||
name: 'age',
|
||||
initValue: '22'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'NumberPicker',
|
||||
props: {
|
||||
size: 'medium',
|
||||
type: 'normal'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
componentName: 'FormItem',
|
||||
props: {
|
||||
label: '职业：',
|
||||
name: 'profession'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
props: {
|
||||
dataSource: [
|
||||
{
|
||||
label: '教师',
|
||||
value: 't'
|
||||
},
|
||||
{
|
||||
label: '医生',
|
||||
value: 'd'
|
||||
},
|
||||
{
|
||||
label: '歌手',
|
||||
value: 's'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'ButtonGroup',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: {
|
||||
type: 'primary',
|
||||
style: {
|
||||
margin: '0 5px 0 5px'
|
||||
},
|
||||
htmlType: 'submit'
|
||||
},
|
||||
children: '提交'
|
||||
},
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: {
|
||||
type: 'normal',
|
||||
style: {
|
||||
margin: '0 5px 0 5px'
|
||||
},
|
||||
htmlType: 'reset'
|
||||
},
|
||||
children: '重置'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default class DesignerPlugin extends PureComponent<PluginProps> {
|
||||
static displayName: 'LowcodePluginDesigner';
|
||||
@ -143,10 +170,31 @@ export default class DesignerPlugin extends PureComponent<PluginProps> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { editor } = this.props;
|
||||
return (
|
||||
<div className="lowcode-plugin-designer">
|
||||
<Designer defaultSchema={SCHEMA}/>
|
||||
|
||||
</div>);
|
||||
<div className="lowcode-plugin-designer">
|
||||
<Designer
|
||||
defaultSchema={SCHEMA as any}
|
||||
eventPipe={editor as any}
|
||||
simulatorProps={{
|
||||
componentsAsset: [
|
||||
{
|
||||
type: 'jsUrl',
|
||||
content: 'https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js',
|
||||
id: 'next',
|
||||
level: 2
|
||||
},
|
||||
{
|
||||
type: 'cssUrl',
|
||||
content: 'https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.css',
|
||||
id: 'next',
|
||||
level: 2
|
||||
}
|
||||
],
|
||||
// simulatorUrl: ['/statics/simulator-renderer.css', '/statics/simulator-renderer.js']
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user