tongChong
/
lowcode-demo
mirror of https://github.com/alibaba/lowcode-demo.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: divide scenarios into individual projects

This commit is contained in:
JackLian 2022-11-16 13:27:24 +08:00 committed by 刘菊萍(絮黎)
parent 7ba82af55f
commit 4d1bfef87a
288 changed files with 34533 additions and 2866 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,7 +1,7 @@
# project custom
build
dist
package-lock.json
# IDE
.vscode

30
README.md
View File

@ -1,20 +1,30 @@
## Low-Code Engine Demo
demo是一个组合内核、setter、插件、物料的示范工程，因为未经长期生产环境打磨，可能还会有一些各个模块间结合的 bug，希望大家理解~
本 demo 是一个组合内核、setter、插件、物料的示范工程，因为未经长期生产环境打磨，可能还会有一些各个模块间结合的 bug，希望大家理解~
## 如何使用
目前包含多个独立 demo 工程目录，每个 demo 目录都是一个独立的工程, 代表一个特定的 demo 场景，可以选择其一单独使用。
```bash
git clone git@github.com:alibaba/lowcode-demo.git
cd lowcode-demo
cd demo-general
npm install
npm run start
```
场景列表：
- [index](https://lowcode-engine.cn/demo/index.html)
- [basic-fusion](https://lowcode-engine.cn/demo/basic-fusion.html)（此 fusion 的元数据描述是很老的版本，只为了示意描述结构，请勿用于生产环境）
- [basic-antd](https://lowcode-engine.cn/demo/basic-antd.html)
- [basic-fusion-with-single-component](https://lowcode-engine.cn/demo/basic-fusion-with-single-component.html)
- [custom-initialization](https://lowcode-engine.cn/demo/custom-initialization.html)
- [node-extended-actions](https://lowcode-engine.cn/demo/node-extended-actions.html)
- [next-pro](https://lowcode-engine.cn/demo/next-pro.html)
- [antd-pro-with-formily](https://lowcode-engine.cn/demo/antd-pro-with-formily.html)
- [general](https://lowcode-engine.cn/demo/demo-general)
- [basic-fusion](https://lowcode-engine.cn/demo/demo-basic-fusion)（此 fusion 的元数据描述是很老的版本，只为了示意描述结构，请勿用于生产环境）
- [basic-antd](https://lowcode-engine.cn/demo/demo-basic-antd)
- [basic-fusion-with-single-component](https://lowcode-engine.cn/demo/demo-basic-fusion-with-single-component)
- [custom-initialization](https://lowcode-engine.cn/demo/demo-custom-initialization)
- [node-extended-actions](https://lowcode-engine.cn/demo/demo-node-extended-actions)
- [next-pro](https://lowcode-engine.cn/demo/demo-next-pro)
- [antd-pro-with-formily](https://lowcode-engine.cn/demo/demo-antd-pro-with-formily)
更多参考资料：
- [马上玩一下](https://lowcode-engine.cn/demo/index.html)
- [马上玩一下](https://lowcode-engine.cn/demo/demo-general)
- [低代码引擎官网](http://lowcode-engine.cn)
- [引擎主包](https://github.com/alibaba/lowcode-engine)

28
build.json
View File

@ -1,6 +1,28 @@
{
"entry": {
"preview": "./src/preview.tsx"
"demo-general/index" : "./demo-general/src/index.ts",
"demo-general/preview" : "./demo-general/src/preview.tsx",
"demo-antd-pro-with-formily/index" : "./demo-antd-pro-with-formily/src/index.ts",
"demo-antd-pro-with-formily/preview" : "./demo-antd-pro-with-formily/src/preview.tsx",
"demo-basic-antd/index" : "./demo-basic-antd/src/index.ts",
"demo-basic-antd/preview" : "./demo-basic-antd/src/preview.tsx",
"demo-basic-fusion/index" : "./demo-basic-fusion/src/index.ts",
"demo-basic-fusion/preview" : "./demo-basic-fusion/src/preview.tsx",
"demo-basic-fusion-with-single-component/index" : "./demo-basic-fusion-with-single-component/src/index.ts",
"demo-basic-fusion-with-single-component/preview" : "./demo-basic-fusion-with-single-component/src/preview.tsx",
"demo-custom-initialization/index" : "./demo-custom-initialization/src/index.tsx",
"demo-custom-initialization/preview" : "./demo-custom-initialization/src/preview.tsx",
"demo-next-pro/index" : "./demo-next-pro/src/index.ts",
"demo-next-pro/preview" : "./demo-next-pro/src/preview.tsx",
"demo-node-extended-actions/index" : "./demo-node-extended-actions/src/index.ts",
"demo-node-extended-actions/preview" : "./demo-node-extended-actions/src/preview.tsx"
},
"vendor": false,
"devServer": {
@ -13,11 +35,7 @@
"prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next",
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
"@alilc/lowcode-editor-core": "var window.AliLowCodeEngine.common.editorCabin",
"@alilc/lowcode-editor-skeleton": "var window.AliLowCodeEngine.common.skeletonCabin",
"@alilc/lowcode-designer": "var window.AliLowCodeEngine.common.designerCabin",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
"@ali/lowcode-engine": "var window.AliLowCodeEngine",
"moment": "var window.moment",
"lodash": "var window._"
},

70
build.plugin.js
View File

@ -1,9 +1,8 @@
const { join } = require('path');
const fs = require('fs-extra');
const configuration = require('./build.json');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const scenarioNames = fs.readdirSync(join('./src/scenarios')).filter(name => !name.startsWith('.'));
const { version } = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
module.exports = ({ onGetWebpackConfig }) => {
@ -19,41 +18,42 @@ module.exports = ({ onGetWebpackConfig }) => {
fs: 'empty',
},
});
scenarioNames.forEach(name => {
const hasTsx = fs.existsSync(join(`./src/scenarios/${name}/index.tsx`));
config.merge({
entry: {
[name]: hasTsx ? require.resolve(`./src/scenarios/${name}/index.tsx`) : require.resolve(`./src/scenarios/${name}/index.ts`),
},
});
config
.plugin(name)
.use(HtmlWebpackPlugin, [
{
inject: false,
minify: false,
templateParameters: {
scenario: name,
version,
const entries = Object.keys(configuration.entry) || [];
entries.map((entry) => {
const [scenarioName, page] = entry.split('/');
if (page === 'index') {
config
.plugin(entry)
.use(HtmlWebpackPlugin, [
{
inject: false,
minify: false,
templateParameters: {
version,
scenarioName
},
template: require.resolve('./public/index.ejs'),
filename: `${scenarioName}/index.html`,
},
template: require.resolve('./public/index.ejs'),
filename: `${name}.html`,
},
]);
})
]);
}
if (page === 'preview') {
config
.plugin(entry)
.use(HtmlWebpackPlugin, [
{
inject: false,
minify: false,
templateParameters: {
scenarioName,
},
template: require.resolve('./public/preview.html'),
filename: `${scenarioName}/preview.html`,
},
]);
config
.plugin('preview')
.use(HtmlWebpackPlugin, [
{
inject: false,
templateParameters: {
},
template: require.resolve('./public/preview.html'),
filename: 'preview.html',
},
]);
}
})
config.plugins.delete('hot');
config.devServer.hot(false);

7
demo-antd-pro-with-formily/.prettierrc.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
printWidth: 100,
tabWidth: 2,
semi: true,
singleQuote: true,
trailingComma: 'all',
};

35
demo-antd-pro-with-formily/build.json Normal file
View File

@ -0,0 +1,35 @@
{
"entry": {
"preview": "./src/preview.tsx",
"index": "./src/index.ts"
},
"vendor": false,
"devServer": {
"hot": false
},
"publicPath": "/",
"externals": {
"react": "var window.React",
"react-dom": "var window.ReactDOM",
"prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next",
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
"moment": "var window.moment",
"lodash": "var window._"
},
"plugins": [
[
"build-plugin-react-app"
],
[
"build-plugin-moment-locales",
{
"locales": [
"zh-cn"
]
}
],
"./build.plugin.js"
]
}

57
demo-antd-pro-with-formily/build.plugin.js Normal file
View File

@ -0,0 +1,57 @@
const fs = require('fs-extra');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { version } = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [
{
configFile: './tsconfig.json',
},
]);
config.merge({
node: {
fs: 'empty',
},
});
config
.plugin('index')
.use(HtmlWebpackPlugin, [
{
inject: false,
minify: false,
templateParameters: {
version,
},
template: require.resolve('./public/index.ejs'),
filename: 'index.html',
},
]);
config
.plugin('preview')
.use(HtmlWebpackPlugin, [
{
inject: false,
templateParameters: {
},
template: require.resolve('./public/preview.html'),
filename: 'preview.html',
},
]);
config.plugins.delete('hot');
config.devServer.hot(false);
config.module // fixes https://github.com/graphql/graphql-js/issues/1272
.rule('mjs$')
.test(/\.mjs$/)
.include
.add(/node_modules/)
.end()
.type('javascript/auto');
});
};

58
demo-antd-pro-with-formily/package.json Normal file
View File

@ -0,0 +1,58 @@
{
"name": "@alilc/lowcode-demo-antd-pro-with-formily",
"version": "1.0.28",
"description": "Low-Code Engine 低代码搭建引擎 Demo 项目 - antd 高级组件 + formily 表单组件",
"repository": "git@github.com:alibaba/lowcode-demo.git",
"license": "MIT",
"main": "index.js",
"scripts": {
"start": "build-scripts start --disable-reload --port 5556",
"build": "build-scripts build",
"prepublishOnly": "npm run build",
"pub": "node ./scripts/watchdog.js && npm pub"
},
"files": [
"build"
],
"config": {},
"dependencies": {
"@alilc/lowcode-datasource-fetch-handler": "^1.0.1",
"@alilc/lowcode-plugin-code-editor": "^1.0.3",
"@alilc/lowcode-plugin-code-generator": "^1.0.4",
"@alilc/lowcode-plugin-components-pane": "^1.0.2",
"@alilc/lowcode-plugin-datasource-pane": "^1.0.6",
"@alilc/lowcode-plugin-inject": "^1.0.0",
"@alilc/lowcode-plugin-manual": "^1.0.3",
"@alilc/lowcode-plugin-schema": "^1.0.1",
"@alilc/lowcode-plugin-simulator-select": "^1.0.2",
"@alilc/lowcode-plugin-undo-redo": "^1.0.0",
"@alilc/lowcode-plugin-zh-en": "^1.0.0",
"@alilc/lowcode-plugin-set-ref-prop": "^1.0.1",
"@alilc/lowcode-react-renderer": "^1.0.0",
"@alilc/lowcode-setter-behavior": "^1.0.0",
"@alilc/lowcode-setter-title": "^1.0.2",
"@formily/antd": "^2.1.9",
"@formily/core": "^2.1.9",
"@formily/react": "^2.1.9",
"@seada/antd-plugins": "0.0.1-rc.3",
"antd": "^4.21.4",
"moment": "^2.29.3",
"uuid": "^8.3.2"
},
"devDependencies": {
"@alib/build-scripts": "^0.1.18",
"@alilc/lowcode-engine": "^1.0.0",
"@alilc/lowcode-engine-ext": "^1.0.0",
"@alilc/lowcode-types": "^1.0.0",
"@types/events": "^3.0.0",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",
"@types/streamsaver": "^2.0.0",
"@types/uuid": "^8.3.4",
"build-plugin-fusion": "^0.1.0",
"build-plugin-moment-locales": "^0.1.0",
"build-plugin-react-app": "^1.1.2",
"fs-extra": "^10.0.1",
"tsconfig-paths-webpack-plugin": "^3.2.0"
}
}

BIN
demo-antd-pro-with-formily/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

0
public/fixtures/basic-fusion-with-single-component/meta.js → demo-antd-pro-with-formily/public/fixtures/basic-fusion-with-single-component/meta.js
View File

0
public/fixtures/basic-fusion-with-single-component/view.css → demo-antd-pro-with-formily/public/fixtures/basic-fusion-with-single-component/view.css
View File

0
public/fixtures/basic-fusion-with-single-component/view.js → demo-antd-pro-with-formily/public/fixtures/basic-fusion-with-single-component/view.js
View File

48
demo-antd-pro-with-formily/public/index.ejs Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>阿里低代码引擎 Demo</title>
<link rel="icon" href="//img.alicdn.com/imgextra/i2/O1CN01lNWGJi1xflgRfSgbk_!!6000000006471-55-tps-22-26.svg">
<link href="./css/index.css" rel="stylesheet" />
<!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
<link href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css" rel="stylesheet" />
<link href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css" rel="stylesheet" />
<!-- 低代码引擎的页面框架样式 -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.15/dist/css/engine-core.css" />
<!-- 低代码引擎官方扩展的样式 -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/css/engine-ext.css" />
<!-- React，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
<!-- React DOM，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<!-- React 向下兼容，预防物料层的依赖 -->
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
<!-- lodash，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<!-- 日期处理包，Fusion Next 的依赖 -->
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<!-- Fusion Next 的主包，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<!-- 低代码引擎的主包 -->
<script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.15/dist/js/engine-core.js"></script>
<!-- 低代码引擎官方扩展的主包 -->
<script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/js/engine-ext.js"></script>
<script>
console.log(
'%c AliLowCodeEngineDemo %c v<%= version %> ',
'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #b37feb; font-weight: bold;',
'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;',
);
</script>
</head>
<body>
<div id="lce-container"></div>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

1
demo-antd-pro-with-formily/public/index.html Normal file
View File

@ -0,0 +1 @@
勿删，删了有奇妙的 bug😄~

0
public/mock-pages.json → demo-antd-pro-with-formily/public/mock-pages.json
View File

3
demo-antd-pro-with-formily/public/mock/info.json Normal file
View File

@ -0,0 +1,3 @@
{
"info": "Hello AliLowCode!!"
}

25
demo-antd-pro-with-formily/public/preview.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>阿里低代码引擎 Demo - 预览页</title>
<link href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css" rel="stylesheet">
<link href="./css/preview.css" rel="stylesheet">
</head>
<body>
<div id="ice-container"></div>
<script>
window.g_config = {
locale: 'zh_CN',
};
</script>
<script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js"></script>
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<script type="text/javascript" src="./js/preview.js"></script>
</body>
</html>

15
demo-antd-pro-with-formily/scripts/watchdog.js Executable file
View File

@ -0,0 +1,15 @@
#!/usr/bin/env node
const fs = require('fs');
const { join } = require('path');
const workingDir = process.cwd();
const pkg = JSON.parse(fs.readFileSync(join(workingDir, 'package.json'), 'utf-8'));
if (pkg.private) return;
const { files } = pkg;
files.forEach(file => {
const fileDir = join(workingDir, file);
if (!fs.existsSync(fileDir)) {
throw new Error(`${fileDir} does not exist, plz run build`);
}
});

0
src/universal/global.scss → demo-antd-pro-with-formily/src/global.scss
View File

110
demo-antd-pro-with-formily/src/index.ts Normal file
View File

@ -0,0 +1,110 @@
import { init, plugins } from '@alilc/lowcode-engine';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'
import EditorInitPlugin from './plugins/plugin-editor-init';
import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo';
import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';
import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane';
import SchemaPlugin from '@alilc/lowcode-plugin-schema';
import CodeEditorPlugin from "@alilc/lowcode-plugin-code-editor";
import ManualPlugin from "@alilc/lowcode-plugin-manual";
import InjectPlugin from '@alilc/lowcode-plugin-inject';
import SimulatorResizerPlugin from '@alilc/lowcode-plugin-simulator-select';
import ComponentPanelPlugin from './plugins/plugin-component-panel';
import DefaultSettersRegistryPlugin from './plugins/plugin-default-setters-registry';
import LoadIncrementalAssetsWidgetPlugin from './plugins/plugin-load-incremental-assets-widget';
import SaveSamplePlugin from './plugins/plugin-save-sample';
import PreviewSamplePlugin from './plugins/plugin-preview-sample';
import CustomSetterSamplePlugin from './plugins/plugin-custom-setter-sample';
import SetRefPropPlugin from '@alilc/lowcode-plugin-set-ref-prop';
import LogoSamplePlugin from './plugins/plugin-logo-sample';
import './global.scss';
async function registerPlugins() {
await plugins.register(EditorInitPlugin, {
scenarioName: 'antd-pro-with-formily',
displayName: 'antd 高级组件 + formily 表单组件',
info: {
urls: [
{
key: '设计器',
value: 'https://github.com/alibaba/lowcode-demo/tree/main/demo-antd-pro-with-formily',
},
{
"key": "formily 物料",
"value": "https://github.com/seada-low-code/lowcode-ecology/tree/main/packages/formily-materials"
}
],
},
});
// 设置内置 setter 和事件绑定、插件绑定面板
await plugins.register(DefaultSettersRegistryPlugin);
await plugins.register(LogoSamplePlugin);
await plugins.register(ComponentPanelPlugin);
await plugins.register(SchemaPlugin);
await plugins.register(ManualPlugin);
// 注册回退/前进
await plugins.register(UndoRedoPlugin);
// 注册中英文切换
await plugins.register(ZhEnPlugin);
await plugins.register(InjectPlugin);
await plugins.register(SetRefPropPlugin);
await plugins.register(SimulatorResizerPlugin);
await plugins.register(LoadIncrementalAssetsWidgetPlugin);
// 插件参数声明 & 传递，参考：https://www.yuque.com/lce/doc/ibh9fh#peEmG
await plugins.register(DataSourcePanePlugin, {
importPlugins: [],
dataSourceTypes: [
{
type: 'fetch',
},
{
type: 'jsonp',
}
]
});
await plugins.register(CodeEditorPlugin);
// 注册出码插件
await plugins.register(CodeGenPlugin);
await plugins.register(SaveSamplePlugin);
await plugins.register(PreviewSamplePlugin);
await plugins.register(CustomSetterSamplePlugin);
};
(async function main() {
await registerPlugins();
init(document.getElementById('lce-container')!, {
// locale: 'zh-CN',
enableCondition: true,
enableCanvasLock: true,
// 默认绑定变量
supportVariableGlobally: true,
// simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！
// 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径
simulatorUrl: [
'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css',
'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js'
],
requestHandlersMap: {
fetch: createFetchHandler()
},
});
})();

28
demo-antd-pro-with-formily/src/plugins/plugin-component-panel/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import { ILowCodePluginContext, project } from '@alilc/lowcode-engine';
import ComponentsPane from '@alilc/lowcode-plugin-components-pane';
const ComponentPanelPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton } = ctx;
// 注册组件面板
const componentsPane = skeleton.add({
area: 'leftArea',
type: 'PanelDock',
name: 'componentsPane',
content: ComponentsPane,
contentProps: {},
props: {
align: 'top',
icon: 'zujianku',
description: '组件库',
},
});
componentsPane?.disable?.();
project.onSimulatorRendererReady(() => {
componentsPane?.enable?.();
})
},
};
}
ComponentPanelPlugin.pluginName = 'ComponentPanelPlugin';
export default ComponentPanelPlugin;

19
demo-antd-pro-with-formily/src/plugins/plugin-custom-setter-sample/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import TitleSetter from '@alilc/lowcode-setter-title';
import BehaviorSetter from './setters/behavior-setter';
import CustomSetter from './setters/custom-setter';
// 保存功能示例
const CustomSetterSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { setters } = ctx;
setters.registerSetter('TitleSetter', TitleSetter);
setters.registerSetter('BehaviorSetter', BehaviorSetter);
setters.registerSetter('CustomSetter', CustomSetter);
},
};
}
CustomSetterSamplePlugin.pluginName = 'CustomSetterSamplePlugin';
export default CustomSetterSamplePlugin;

0
src/setters/behavior-setter.tsx → demo-antd-pro-with-formily/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx
View File

3
src/setters/custom-setter.tsx → demo-antd-pro-with-formily/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx
View File

@ -1,4 +1,5 @@
import React, { Component } from 'react'; // import classNames from 'classnames';
import React, { Component } from 'react';
// import classNames from 'classnames';
class CustomSetter extends Component<any, any> {
render() {

34
demo-antd-pro-with-formily/src/plugins/plugin-default-setters-registry/index.tsx Normal file
View File

@ -0,0 +1,34 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext';
// 设置内置 setter 和事件绑定、插件绑定面板
const DefaultSettersRegistryPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { setterMap, pluginMap } = AliLowCodeEngineExt;
const { setters, skeleton } = ctx;
// 注册setterMap
setters.registerSetter(setterMap);
// 注册插件
// 注册事件绑定面板
skeleton.add({
area: 'centerArea',
type: 'Widget',
content: pluginMap.EventBindDialog,
name: 'eventBindDialog',
props: {},
});
// 注册变量绑定面板
skeleton.add({
area: 'centerArea',
type: 'Widget',
content: pluginMap.VariableBindDialog,
name: 'variableBindDialog',
props: {},
});
},
};
}
DefaultSettersRegistryPlugin.pluginName = 'DefaultSettersRegistryPlugin';
export default DefaultSettersRegistryPlugin;

51
demo-antd-pro-with-formily/src/plugins/plugin-editor-init/index.tsx Normal file
View File

@ -0,0 +1,51 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { injectAssets } from '@alilc/lowcode-plugin-inject';
import assets from '../../services/assets.json';
import { getPageSchema } from '../../services/mockService';
const EditorInitPlugin = (ctx: ILowCodePluginContext, options: any) => {
return {
async init() {
const { material, project, config } = ctx;
const scenarioName = options['scenarioName'];
const scenarioDisplayName = options['displayName'] || scenarioName;
const scenarioInfo = options['info'] || {};
// 保存在config中用于引擎范围其他插件使用
config.set('scenarioName', scenarioName);
config.set('scenarioDisplayName', scenarioDisplayName);
config.set('scenarioInfo', scenarioInfo);
// 设置物料描述
await material.setAssets(await injectAssets(assets));
const schema = await getPageSchema();
// 加载 schema
project.openDocument(schema);
},
};
}
EditorInitPlugin.pluginName = 'EditorInitPlugin';
EditorInitPlugin.meta = {
preferenceDeclaration: {
title: '保存插件配置',
properties: [
{
key: 'scenarioName',
type: 'string',
description: '用于localstorage存储key',
},
{
key: 'displayName',
type: 'string',
description: '用于显示的场景名',
},
{
key: 'info',
type: 'object',
description: '用于扩展信息',
}
],
},
};
export default EditorInitPlugin;

170
demo-antd-pro-with-formily/src/plugins/plugin-load-incremental-assets-widget/index.tsx Normal file
View File

@ -0,0 +1,170 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import { material } from '@alilc/lowcode-engine';
import { Message } from '@alifd/next';
const loadIncrementalAssets = () => {
material?.onChangeAssets(() => {
Message.success('[MCBreadcrumb] 物料加载成功');
});
material.loadIncrementalAssets({
packages: [
{
title: 'MCBreadcrumb',
package: 'mc-breadcrumb',
version: '1.0.0',
urls: [
'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js',
'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css',
],
library: 'MCBreadcrumb',
},
],
components: [
{
componentName: 'MCBreadcrumb',
title: 'MCBreadcrumb',
docUrl: '',
screenshot: '',
npm: {
package: 'mc-breadcrumb',
version: '1.0.0',
exportName: 'MCBreadcrumb',
main: 'lib/index.js',
destructuring: false,
subName: '',
},
props: [
{
name: 'prefix',
propType: 'string',
description: '样式类名的品牌前缀',
defaultValue: 'next-',
},
{
name: 'title',
propType: 'string',
description: '标题',
defaultValue: 'next-',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'children',
propType: {
type: 'instanceOf',
value: 'node',
},
description: '面包屑子节点，需传入 Breadcrumb.Item',
},
{
name: 'maxNode',
propType: {
type: 'oneOfType',
value: [
'number',
{
type: 'oneOf',
value: ['auto'],
},
],
},
description:
'面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。',
defaultValue: 100,
},
{
name: 'separator',
propType: {
type: 'instanceOf',
value: 'node',
},
description: '分隔符，可以是文本或 Icon',
},
{
name: 'component',
propType: {
type: 'oneOfType',
value: ['string', 'func'],
},
description: '设置标签类型',
defaultValue: 'nav',
},
{
name: 'className',
propType: 'any',
},
{
name: 'style',
propType: 'object',
},
],
configure: {
component: {
isContainer: true,
isModel: true,
rootSelector: 'div.MCBreadcrumb',
},
},
},
],
componentList: [
{
title: '常用',
icon: '',
children: [
{
componentName: 'MCBreadcrumb',
title: 'MC面包屑',
icon: '',
package: 'mc-breadcrumb',
library: 'MCBreadcrumb',
snippets: [
{
title: 'MC面包屑',
screenshot:
'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png',
schema: {
componentName: 'MCBreadcrumb',
props: {
title: '物料中心',
prefix: 'next-',
maxNode: 100,
},
},
},
],
},
],
},
],
});
};
const LoadIncrementalAssetsWidgetPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton } = ctx;
skeleton.add({
name: 'loadAssetsSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
width: 80,
},
content: (
<Button onClick={loadIncrementalAssets}>
异步加载资源
</Button>
),
});
},
};
}
LoadIncrementalAssetsWidgetPlugin.pluginName = 'LoadIncrementalAssetsWidgetPlugin';
export default LoadIncrementalAssetsWidgetPlugin;

25
demo-antd-pro-with-formily/src/plugins/plugin-logo-sample/index.scss Normal file
View File

@ -0,0 +1,25 @@
.lowcode-plugin-logo {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
width: 400px;
.logo {
display: block;
width: 139px;
height: 26px;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.scenario-name {
display: block;
margin-left: 20px;
margin-right: 5px;
font-size: 14px;
}
.info-dropdown {
display: block;
}
}

74
demo-antd-pro-with-formily/src/plugins/plugin-logo-sample/index.tsx Normal file
View File

@ -0,0 +1,74 @@
import React from 'react';
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Dropdown, Menu } from '@alifd/next';
import './index.scss';
export interface IProps {
logo?: string;
href?: string;
scenarioInfo?: any;
scenarioDisplayName?: string;
}
const Logo: React.FC<IProps> = (props): React.ReactElement => {
const { scenarioDisplayName, scenarioInfo } = props;
const urls = scenarioInfo?.urls || [];
return (
<div className="lowcode-plugin-logo">
<a className="logo" target="blank" href={props.href || 'https://lowcode-engine.cn'} style={{ backgroundImage: `url(${props.logo})` }} />
<div className="scenario-name">{scenarioDisplayName}</div>
{
urls && (
<Dropdown
className="info-dropdown"
trigger={(
<img
style={{
height: '18px',
position: 'relative',
top: '-2px',
}}
src="https://img.alicdn.com/imgextra/i4/O1CN013upU1R1yl5wVezP8k_!!6000000006618-2-tps-512-512.png"
/>
)}
triggerType="click"
>
<Menu onItemClick={(key, item) => window.open(key, '_blank')}>
{
urls.map((url: any) => <Menu.Item key={url.value}>{url.key}</Menu.Item>)
}
</Menu>
</Dropdown>
)
}
</div>
);
};
// 示例 Logo widget
const LogoSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, config } = ctx;
const scenarioDisplayName = config.get('scenarioDisplayName');
const scenarioInfo = config.get('scenarioInfo');
// 注册 logo widget
skeleton.add({
area: 'topArea',
type: 'Widget',
name: 'logo',
content: <Logo scenarioDisplayName={scenarioDisplayName} scenarioInfo={scenarioInfo} />,
contentProps: {
logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg',
href: 'https://lowcode-engine.cn',
},
props: {
align: 'left',
},
});
},
};
}
LogoSamplePlugin.pluginName = 'LogoSamplePlugin';
LogoSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default LogoSamplePlugin;

41
demo-antd-pro-with-formily/src/plugins/plugin-preview-sample/index.tsx Normal file
View File

@ -0,0 +1,41 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import {
saveSchema,
} from '../../services/mockService';
// 保存功能示例
const PreviewSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, config } = ctx;
const doPreview = () => {
const scenarioName = config.get('scenarioName');
console.log('go preview with scenarioName:',scenarioName );
saveSchema(scenarioName);;
setTimeout(() => {
const search = location.search ? `${location.search}&scenarioName=${scenarioName}` : `?scenarioName=${scenarioName}`;
window.open(`./preview.html${search}`);
}, 500);
};
skeleton.add({
name: 'previewSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button type="primary" onClick={() => doPreview()}>
预览
</Button>
),
});
},
};
}
PreviewSamplePlugin.pluginName = 'PreviewSamplePlugin';
PreviewSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default PreviewSamplePlugin;

52
demo-antd-pro-with-formily/src/plugins/plugin-save-sample/index.tsx Normal file
View File

@ -0,0 +1,52 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import {
saveSchema,
resetSchema,
} from '../../services/mockService';
// 保存功能示例
const SaveSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, hotkey, config } = ctx;
const scenarioName = config.get('scenarioName');
skeleton.add({
name: 'saveSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button onClick={() => saveSchema(scenarioName)}>
保存到本地
</Button>
),
});
skeleton.add({
name: 'resetSchema',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button onClick={() => resetSchema(scenarioName)}>
重置页面
</Button>
),
});
hotkey.bind('command+s', (e) => {
e.preventDefault();
saveSchema(scenarioName);
});
},
};
}
SaveSamplePlugin.pluginName = 'SaveSamplePlugin';
SaveSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default SaveSamplePlugin;

4
src/preview.tsx → demo-antd-pro-with-formily/src/preview.tsx
View File

@ -6,11 +6,11 @@ import ReactRenderer from '@alilc/lowcode-react-renderer';
import { injectComponents } from '@alilc/lowcode-plugin-inject';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'
import { getProjectSchemaFromLocalStorage, getPackagesFromLocalStorage } from './universal/utils';
import { getProjectSchemaFromLocalStorage, getPackagesFromLocalStorage } from './services/mockService';
const getScenarioName = function () {
if (location.search) {
return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index'
return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index';
}
return 'index';
}

0
src/scenarios/antd-pro-with-formily/assets.json → demo-antd-pro-with-formily/src/services/assets.json
View File

95
demo-antd-pro-with-formily/src/services/mockService.ts Normal file
View File

@ -0,0 +1,95 @@
import { material, project } from '@alilc/lowcode-engine';
import { filterPackages } from '@alilc/lowcode-plugin-inject'
import { Message, Dialog } from '@alifd/next';
import { TransformStage } from '@alilc/lowcode-types';
import schema from './schema.json';
export const saveSchema = async (scenarioName: string = 'unknown') => {
setProjectSchemaToLocalStorage(scenarioName);
await setPackgesToLocalStorage(scenarioName);
Message.success('成功保存到本地');
};
export const resetSchema = async (scenarioName: string = 'unknown') => {
try {
await new Promise<void>((resolve, reject) => {
Dialog.confirm({
content: '确定要重置吗？您所有的修改都将消失！',
onOk: () => {
resolve();
},
onCancel: () => {
reject()
},
})
})
} catch(err) {
return;
}
let defaultSchema = schema || {
componentsTree: [{ componentName: 'Page', fileName: 'sample' }],
componentsMap: material.componentsMap,
version: '1.0.0',
i18n: {},
};
project.getCurrentDocument()?.importSchema(defaultSchema as any);
project.simulatorHost?.rerender();
setProjectSchemaToLocalStorage(scenarioName);
await setPackgesToLocalStorage(scenarioName);
Message.success('成功重置页面');
}
const getLSName = (scenarioName: string, ns: string = 'projectSchema') => `${scenarioName}:${ns}`;
export const getProjectSchemaFromLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
return JSON.parse(window.localStorage.getItem(getLSName(scenarioName)) || '{}');
}
const setProjectSchemaToLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
window.localStorage.setItem(
getLSName(scenarioName),
JSON.stringify(project.exportSchema(TransformStage.Save))
);
}
const setPackgesToLocalStorage = async (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
const packages = await filterPackages(material.getAssets().packages);
window.localStorage.setItem(
getLSName(scenarioName, 'packages'),
JSON.stringify(packages),
);
}
export const getPackagesFromLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
return JSON.parse(window.localStorage.getItem(getLSName(scenarioName, 'packages')) || '{}');
}
export const getPageSchema = async (scenarioName: string = 'unknown') => {
const pageSchema = getProjectSchemaFromLocalStorage(scenarioName).componentsTree?.[0];
if (pageSchema) {
return pageSchema;
}
console.log(`failed to get schema for scenarioName ${scenarioName} from localstorage, use default schema`, schema);
return schema;
};

0
src/scenarios/antd-pro-with-formily/schema.json → demo-antd-pro-with-formily/src/services/schema.json
View File

44
demo-antd-pro-with-formily/tsconfig.json Normal file
View File

@ -0,0 +1,44 @@
{
"compilerOptions": {
"baseUrl": ".",
"declaration": true,
"lib": ["es2015", "dom"],
// Target latest version of ECMAScript.
"target": "esnext",
// Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
"module": "esnext",
// Search under node_modules for non-relative imports.
"moduleResolution": "node",
// Process & infer types from .js files.
"allowJs": true,
// Report errors in .js files.
"checkJs": false,
// Don't emit; allow Babel to transform files.
// "noEmit": true,
// Enable strictest settings like strictNullChecks & noImplicitAny.
"strict": true,
// Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
"allowSyntheticDefaultImports": true,
// Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
"esModuleInterop": true,
// Specify JSX code generation: 'preserve', 'react-native', or 'react'.
"jsx": "preserve",
// Import emit helpers (e.g. __extends, __rest, etc..) from tslib
"importHelpers": true,
// Enables experimental support for ES7 decorators.
"experimentalDecorators": true,
// Generates corresponding .map file.
"sourceMap": true,
// Disallow inconsistently-cased references to the same file.
"forceConsistentCasingInFileNames": true,
// Allow json import
"resolveJsonModule": true,
// skip type checking of declaration files
"skipLibCheck": true,
"outDir": "lib"
},
"include": [
"./src/"
],
"exclude": ["**/test", "**/lib", "**/es", "node_modules"]
}

7
demo-basic-antd/.prettierrc.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
printWidth: 100,
tabWidth: 2,
semi: true,
singleQuote: true,
trailingComma: 'all',
};

35
demo-basic-antd/build.json Normal file
View File

@ -0,0 +1,35 @@
{
"entry": {
"preview": "./src/preview.tsx",
"index": "./src/index.ts"
},
"vendor": false,
"devServer": {
"hot": false
},
"publicPath": "/",
"externals": {
"react": "var window.React",
"react-dom": "var window.ReactDOM",
"prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next",
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
"moment": "var window.moment",
"lodash": "var window._"
},
"plugins": [
[
"build-plugin-react-app"
],
[
"build-plugin-moment-locales",
{
"locales": [
"zh-cn"
]
}
],
"./build.plugin.js"
]
}

57
demo-basic-antd/build.plugin.js Normal file
View File

@ -0,0 +1,57 @@
const fs = require('fs-extra');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { version } = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [
{
configFile: './tsconfig.json',
},
]);
config.merge({
node: {
fs: 'empty',
},
});
config
.plugin('index')
.use(HtmlWebpackPlugin, [
{
inject: false,
minify: false,
templateParameters: {
version,
},
template: require.resolve('./public/index.ejs'),
filename: 'index.html',
},
]);
config
.plugin('preview')
.use(HtmlWebpackPlugin, [
{
inject: false,
templateParameters: {
},
template: require.resolve('./public/preview.html'),
filename: 'preview.html',
},
]);
config.plugins.delete('hot');
config.devServer.hot(false);
config.module // fixes https://github.com/graphql/graphql-js/issues/1272
.rule('mjs$')
.test(/\.mjs$/)
.include
.add(/node_modules/)
.end()
.type('javascript/auto');
});
};

58
demo-basic-antd/package.json Normal file
View File

@ -0,0 +1,58 @@
{
"name": "@alilc/lowcode-demo-basic-antd",
"version": "1.0.28",
"description": "Low-Code Engine 低代码搭建引擎 Demo 项目 - 基础antd组件",
"repository": "git@github.com:alibaba/lowcode-demo.git",
"license": "MIT",
"main": "index.js",
"scripts": {
"start": "build-scripts start --disable-reload --port 5556",
"build": "build-scripts build",
"prepublishOnly": "npm run build",
"pub": "node ./scripts/watchdog.js && npm pub"
},
"files": [
"build"
],
"config": {},
"dependencies": {
"@alilc/lowcode-datasource-fetch-handler": "^1.0.1",
"@alilc/lowcode-plugin-code-editor": "^1.0.3",
"@alilc/lowcode-plugin-code-generator": "^1.0.4",
"@alilc/lowcode-plugin-components-pane": "^1.0.2",
"@alilc/lowcode-plugin-datasource-pane": "^1.0.6",
"@alilc/lowcode-plugin-inject": "^1.0.0",
"@alilc/lowcode-plugin-manual": "^1.0.3",
"@alilc/lowcode-plugin-schema": "^1.0.1",
"@alilc/lowcode-plugin-simulator-select": "^1.0.2",
"@alilc/lowcode-plugin-undo-redo": "^1.0.0",
"@alilc/lowcode-plugin-zh-en": "^1.0.0",
"@alilc/lowcode-plugin-set-ref-prop": "^1.0.1",
"@alilc/lowcode-react-renderer": "^1.0.0",
"@alilc/lowcode-setter-behavior": "^1.0.0",
"@alilc/lowcode-setter-title": "^1.0.2",
"@formily/antd": "^2.1.9",
"@formily/core": "^2.1.9",
"@formily/react": "^2.1.9",
"@seada/antd-plugins": "0.0.1-rc.3",
"antd": "^4.21.4",
"moment": "^2.29.3",
"uuid": "^8.3.2"
},
"devDependencies": {
"@alib/build-scripts": "^0.1.18",
"@alilc/lowcode-engine": "^1.0.0",
"@alilc/lowcode-engine-ext": "^1.0.0",
"@alilc/lowcode-types": "^1.0.0",
"@types/events": "^3.0.0",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",
"@types/streamsaver": "^2.0.0",
"@types/uuid": "^8.3.4",
"build-plugin-fusion": "^0.1.0",
"build-plugin-moment-locales": "^0.1.0",
"build-plugin-react-app": "^1.1.2",
"fs-extra": "^10.0.1",
"tsconfig-paths-webpack-plugin": "^3.2.0"
}
}

BIN
demo-basic-antd/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

1
demo-basic-antd/public/fixtures/basic-fusion-with-single-component/meta.js Normal file
View File

File diff suppressed because one or more lines are too long

0
demo-basic-antd/public/fixtures/basic-fusion-with-single-component/view.css Normal file
View File

1
demo-basic-antd/public/fixtures/basic-fusion-with-single-component/view.js Normal file
View File

@ -0,0 +1 @@
!function e(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.M220318=n():t.M220318=n()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function t(){return e.default}:function t(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=345)}({3:function(e,t){e.exports=window.React},345:function(e,t,n){e.exports=n(429)},346:function(e,t,n){},429:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));var r={};n.r(r),n.d(r,"default",(function(){return l}));var o=n(3),u=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n},f=function e(t,n){var r=t.title,f=t.content,i=u(t,["title","content"]);return o.createElement("div",Object.assign({ref:n,className:"ExampleComponent"},i),o.createElement("h1",null,r),f||"Hello ExampleComponent")},i=Object(o.forwardRef)(f);i.displayName="ExampleComponent";var l=i,c=n(346),a={},p="M220318",d=!0;function s(e,t){return e.default?e.default:e[t]?e[t]:e}}})}));

48
demo-basic-antd/public/index.ejs Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>阿里低代码引擎 Demo</title>
<link rel="icon" href="//img.alicdn.com/imgextra/i2/O1CN01lNWGJi1xflgRfSgbk_!!6000000006471-55-tps-22-26.svg">
<link href="./css/index.css" rel="stylesheet" />
<!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
<link href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css" rel="stylesheet" />
<link href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css" rel="stylesheet" />
<!-- 低代码引擎的页面框架样式 -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.15/dist/css/engine-core.css" />
<!-- 低代码引擎官方扩展的样式 -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/css/engine-ext.css" />
<!-- React，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
<!-- React DOM，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<!-- React 向下兼容，预防物料层的依赖 -->
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
<!-- lodash，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<!-- 日期处理包，Fusion Next 的依赖 -->
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<!-- Fusion Next 的主包，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<!-- 低代码引擎的主包 -->
<script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.15/dist/js/engine-core.js"></script>
<!-- 低代码引擎官方扩展的主包 -->
<script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/js/engine-ext.js"></script>
<script>
console.log(
'%c AliLowCodeEngineDemo %c v<%= version %> ',
'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #b37feb; font-weight: bold;',
'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;',
);
</script>
</head>
<body>
<div id="lce-container"></div>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

1
demo-basic-antd/public/index.html Normal file
View File

@ -0,0 +1 @@
勿删，删了有奇妙的 bug😄~

1
demo-basic-antd/public/mock-pages.json Normal file
View File

@ -0,0 +1 @@
{"success":true,"content":[{"gmtModified":"2021-03-06 00:40:54","formUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","parentNavUuid":"NAV-SYSTEM-PARENT-UUID","hidden":"n","navUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","navType":"PAGE","isIndex":"n","isNew":"n","gmtCreate":"2021-03-06 00:27:26","title":{"en_US":"页面1","zh_CN":"页面1","type":"i18n"},"relateUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","parentId":0,"listOrder":0,"id":556103}]}

3
demo-basic-antd/public/mock/info.json Normal file
View File

@ -0,0 +1,3 @@
{
"info": "Hello AliLowCode!!"
}

25
demo-basic-antd/public/preview.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>阿里低代码引擎 Demo - 预览页</title>
<link href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css" rel="stylesheet">
<link href="./css/preview.css" rel="stylesheet">
</head>
<body>
<div id="ice-container"></div>
<script>
window.g_config = {
locale: 'zh_CN',
};
</script>
<script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js"></script>
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<script type="text/javascript" src="./js/preview.js"></script>
</body>
</html>

15
demo-basic-antd/scripts/watchdog.js Executable file
View File

@ -0,0 +1,15 @@
#!/usr/bin/env node
const fs = require('fs');
const { join } = require('path');
const workingDir = process.cwd();
const pkg = JSON.parse(fs.readFileSync(join(workingDir, 'package.json'), 'utf-8'));
if (pkg.private) return;
const { files } = pkg;
files.forEach(file => {
const fileDir = join(workingDir, file);
if (!fs.existsSync(fileDir)) {
throw new Error(`${fileDir} does not exist, plz run build`);
}
});

55
demo-basic-antd/src/global.scss Normal file
View File

@ -0,0 +1,55 @@
body {
font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
font-size: 12px;
* {
box-sizing: border-box;
}
}
body, #lce-container {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
text-rendering: optimizeLegibility;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
-webkit-font-smoothing: antialiased;
#engine {
width: 100%;
height: 100%;
}
}
html {
min-width: 1024px;
}
.save-sample {
width: 80px;
height: 30px;
background-color: #5584FF;
border: none;
outline: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
.load-assets {
width: 100px;
height: 30px;
background-color: #5584FF;
border: none;
outline: none;
border-radius: 4px;
color: white;
cursor: pointer;
}

110
demo-basic-antd/src/index.ts Normal file
View File

@ -0,0 +1,110 @@
import { init, plugins } from '@alilc/lowcode-engine';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'
import EditorInitPlugin from './plugins/plugin-editor-init';
import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo';
import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';
import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane';
import SchemaPlugin from '@alilc/lowcode-plugin-schema';
import CodeEditorPlugin from "@alilc/lowcode-plugin-code-editor";
import ManualPlugin from "@alilc/lowcode-plugin-manual";
import InjectPlugin from '@alilc/lowcode-plugin-inject';
import SimulatorResizerPlugin from '@alilc/lowcode-plugin-simulator-select';
import ComponentPanelPlugin from './plugins/plugin-component-panel';
import DefaultSettersRegistryPlugin from './plugins/plugin-default-setters-registry';
import LoadIncrementalAssetsWidgetPlugin from './plugins/plugin-load-incremental-assets-widget';
import SaveSamplePlugin from './plugins/plugin-save-sample';
import PreviewSamplePlugin from './plugins/plugin-preview-sample';
import CustomSetterSamplePlugin from './plugins/plugin-custom-setter-sample';
import SetRefPropPlugin from '@alilc/lowcode-plugin-set-ref-prop';
import LogoSamplePlugin from './plugins/plugin-logo-sample';
import './global.scss';
async function registerPlugins() {
await plugins.register(EditorInitPlugin, {
scenarioName: 'basic-antd',
displayName: '基础antd组件',
info: {
urls: [
{
key: '设计器',
value: 'https://github.com/alibaba/lowcode-demo/tree/main/demo-basic-antd',
},
{
"key": "antd 物料",
"value": "https://github.com/alibaba/lowcode-materials/tree/main/packages/antd-lowcode-materials"
}
],
},
});
// 设置内置 setter 和事件绑定、插件绑定面板
await plugins.register(DefaultSettersRegistryPlugin);
await plugins.register(LogoSamplePlugin);
await plugins.register(ComponentPanelPlugin);
await plugins.register(SchemaPlugin);
await plugins.register(ManualPlugin);
// 注册回退/前进
await plugins.register(UndoRedoPlugin);
// 注册中英文切换
await plugins.register(ZhEnPlugin);
await plugins.register(InjectPlugin);
await plugins.register(SetRefPropPlugin);
await plugins.register(SimulatorResizerPlugin);
await plugins.register(LoadIncrementalAssetsWidgetPlugin);
// 插件参数声明 & 传递，参考：https://www.yuque.com/lce/doc/ibh9fh#peEmG
await plugins.register(DataSourcePanePlugin, {
importPlugins: [],
dataSourceTypes: [
{
type: 'fetch',
},
{
type: 'jsonp',
}
]
});
await plugins.register(CodeEditorPlugin);
// 注册出码插件
await plugins.register(CodeGenPlugin);
await plugins.register(SaveSamplePlugin);
await plugins.register(PreviewSamplePlugin);
await plugins.register(CustomSetterSamplePlugin);
};
(async function main() {
await registerPlugins();
init(document.getElementById('lce-container')!, {
// locale: 'zh-CN',
enableCondition: true,
enableCanvasLock: true,
// 默认绑定变量
supportVariableGlobally: true,
// simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！
// 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径
simulatorUrl: [
'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css',
'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js'
],
requestHandlersMap: {
fetch: createFetchHandler()
},
});
})();

28
demo-basic-antd/src/plugins/plugin-component-panel/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import { ILowCodePluginContext, project } from '@alilc/lowcode-engine';
import ComponentsPane from '@alilc/lowcode-plugin-components-pane';
const ComponentPanelPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton } = ctx;
// 注册组件面板
const componentsPane = skeleton.add({
area: 'leftArea',
type: 'PanelDock',
name: 'componentsPane',
content: ComponentsPane,
contentProps: {},
props: {
align: 'top',
icon: 'zujianku',
description: '组件库',
},
});
componentsPane?.disable?.();
project.onSimulatorRendererReady(() => {
componentsPane?.enable?.();
})
},
};
}
ComponentPanelPlugin.pluginName = 'ComponentPanelPlugin';
export default ComponentPanelPlugin;

19
demo-basic-antd/src/plugins/plugin-custom-setter-sample/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import TitleSetter from '@alilc/lowcode-setter-title';
import BehaviorSetter from './setters/behavior-setter';
import CustomSetter from './setters/custom-setter';
// 保存功能示例
const CustomSetterSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { setters } = ctx;
setters.registerSetter('TitleSetter', TitleSetter);
setters.registerSetter('BehaviorSetter', BehaviorSetter);
setters.registerSetter('CustomSetter', CustomSetter);
},
};
}
CustomSetterSamplePlugin.pluginName = 'CustomSetterSamplePlugin';
export default CustomSetterSamplePlugin;

27
demo-basic-antd/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx Normal file
View File

@ -0,0 +1,27 @@
import * as React from 'react';
import BehaviorSetter from '@alilc/lowcode-setter-behavior';
const defaultExtraBehaviorActions: any[] = [];
class LocalBehaviorSetter extends React.Component {
render() {
// ignore url && responseFormatter props, use default ones
const { url: propsUrl, responseFormatter: propsFormatter, extraBehaviorActions: propsExtraBehaviorActions = [], ...otherProps } = this.props;
const url = 'https://hn.algolia.com/api/v1/search?query';
const responseFormatter = (response) => response.hits.map((item) => ({
label: item.title,
value: item.author
}));
const extraBehaviorActions = propsExtraBehaviorActions.concat(defaultExtraBehaviorActions);
return (
<BehaviorSetter
{...otherProps}
url={url}
responseFormatter={responseFormatter}
extraBehaviorActions={extraBehaviorActions}
/>
);
}
}
export default LocalBehaviorSetter;

13
demo-basic-antd/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx Normal file
View File

@ -0,0 +1,13 @@
import React, { Component } from 'react';
// import classNames from 'classnames';
class CustomSetter extends Component<any, any> {
render() {
const { defaultValue, value, onChange } = this.props;
const { editor } = this.props.field;
return <div>hello world</div>;
}
}
export default CustomSetter;

34
demo-basic-antd/src/plugins/plugin-default-setters-registry/index.tsx Normal file
View File

@ -0,0 +1,34 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext';
// 设置内置 setter 和事件绑定、插件绑定面板
const DefaultSettersRegistryPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { setterMap, pluginMap } = AliLowCodeEngineExt;
const { setters, skeleton } = ctx;
// 注册setterMap
setters.registerSetter(setterMap);
// 注册插件
// 注册事件绑定面板
skeleton.add({
area: 'centerArea',
type: 'Widget',
content: pluginMap.EventBindDialog,
name: 'eventBindDialog',
props: {},
});
// 注册变量绑定面板
skeleton.add({
area: 'centerArea',
type: 'Widget',
content: pluginMap.VariableBindDialog,
name: 'variableBindDialog',
props: {},
});
},
};
}
DefaultSettersRegistryPlugin.pluginName = 'DefaultSettersRegistryPlugin';
export default DefaultSettersRegistryPlugin;

51
demo-basic-antd/src/plugins/plugin-editor-init/index.tsx Normal file
View File

@ -0,0 +1,51 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { injectAssets } from '@alilc/lowcode-plugin-inject';
import assets from '../../services/assets.json';
import { getPageSchema } from '../../services/mockService';
const EditorInitPlugin = (ctx: ILowCodePluginContext, options: any) => {
return {
async init() {
const { material, project, config } = ctx;
const scenarioName = options['scenarioName'];
const scenarioDisplayName = options['displayName'] || scenarioName;
const scenarioInfo = options['info'] || {};
// 保存在config中用于引擎范围其他插件使用
config.set('scenarioName', scenarioName);
config.set('scenarioDisplayName', scenarioDisplayName);
config.set('scenarioInfo', scenarioInfo);
// 设置物料描述
await material.setAssets(await injectAssets(assets));
const schema = await getPageSchema();
// 加载 schema
project.openDocument(schema);
},
};
}
EditorInitPlugin.pluginName = 'EditorInitPlugin';
EditorInitPlugin.meta = {
preferenceDeclaration: {
title: '保存插件配置',
properties: [
{
key: 'scenarioName',
type: 'string',
description: '用于localstorage存储key',
},
{
key: 'displayName',
type: 'string',
description: '用于显示的场景名',
},
{
key: 'info',
type: 'object',
description: '用于扩展信息',
}
],
},
};
export default EditorInitPlugin;

170
demo-basic-antd/src/plugins/plugin-load-incremental-assets-widget/index.tsx Normal file
View File

@ -0,0 +1,170 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import { material } from '@alilc/lowcode-engine';
import { Message } from '@alifd/next';
const loadIncrementalAssets = () => {
material?.onChangeAssets(() => {
Message.success('[MCBreadcrumb] 物料加载成功');
});
material.loadIncrementalAssets({
packages: [
{
title: 'MCBreadcrumb',
package: 'mc-breadcrumb',
version: '1.0.0',
urls: [
'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js',
'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css',
],
library: 'MCBreadcrumb',
},
],
components: [
{
componentName: 'MCBreadcrumb',
title: 'MCBreadcrumb',
docUrl: '',
screenshot: '',
npm: {
package: 'mc-breadcrumb',
version: '1.0.0',
exportName: 'MCBreadcrumb',
main: 'lib/index.js',
destructuring: false,
subName: '',
},
props: [
{
name: 'prefix',
propType: 'string',
description: '样式类名的品牌前缀',
defaultValue: 'next-',
},
{
name: 'title',
propType: 'string',
description: '标题',
defaultValue: 'next-',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'children',
propType: {
type: 'instanceOf',
value: 'node',
},
description: '面包屑子节点，需传入 Breadcrumb.Item',
},
{
name: 'maxNode',
propType: {
type: 'oneOfType',
value: [
'number',
{
type: 'oneOf',
value: ['auto'],
},
],
},
description:
'面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。',
defaultValue: 100,
},
{
name: 'separator',
propType: {
type: 'instanceOf',
value: 'node',
},
description: '分隔符，可以是文本或 Icon',
},
{
name: 'component',
propType: {
type: 'oneOfType',
value: ['string', 'func'],
},
description: '设置标签类型',
defaultValue: 'nav',
},
{
name: 'className',
propType: 'any',
},
{
name: 'style',
propType: 'object',
},
],
configure: {
component: {
isContainer: true,
isModel: true,
rootSelector: 'div.MCBreadcrumb',
},
},
},
],
componentList: [
{
title: '常用',
icon: '',
children: [
{
componentName: 'MCBreadcrumb',
title: 'MC面包屑',
icon: '',
package: 'mc-breadcrumb',
library: 'MCBreadcrumb',
snippets: [
{
title: 'MC面包屑',
screenshot:
'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png',
schema: {
componentName: 'MCBreadcrumb',
props: {
title: '物料中心',
prefix: 'next-',
maxNode: 100,
},
},
},
],
},
],
},
],
});
};
const LoadIncrementalAssetsWidgetPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton } = ctx;
skeleton.add({
name: 'loadAssetsSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
width: 80,
},
content: (
<Button onClick={loadIncrementalAssets}>
异步加载资源
</Button>
),
});
},
};
}
LoadIncrementalAssetsWidgetPlugin.pluginName = 'LoadIncrementalAssetsWidgetPlugin';
export default LoadIncrementalAssetsWidgetPlugin;

25
demo-basic-antd/src/plugins/plugin-logo-sample/index.scss Normal file
View File

@ -0,0 +1,25 @@
.lowcode-plugin-logo {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
width: 300px;
.logo {
display: block;
width: 139px;
height: 26px;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.scenario-name {
display: block;
margin-left: 20px;
margin-right: 5px;
font-size: 15px;
}
.info-dropdown {
display: block;
}
}

74
demo-basic-antd/src/plugins/plugin-logo-sample/index.tsx Normal file
View File

@ -0,0 +1,74 @@
import React from 'react';
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Dropdown, Menu } from '@alifd/next';
import './index.scss';
export interface IProps {
logo?: string;
href?: string;
scenarioInfo?: any;
scenarioDisplayName?: string;
}
const Logo: React.FC<IProps> = (props): React.ReactElement => {
const { scenarioDisplayName, scenarioInfo } = props;
const urls = scenarioInfo?.urls || [];
return (
<div className="lowcode-plugin-logo">
<a className="logo" target="blank" href={props.href || 'https://lowcode-engine.cn'} style={{ backgroundImage: `url(${props.logo})` }} />
<div className="scenario-name">{scenarioDisplayName}</div>
{
urls && (
<Dropdown
className="info-dropdown"
trigger={(
<img
style={{
height: '18px',
position: 'relative',
top: '-2px',
}}
src="https://img.alicdn.com/imgextra/i4/O1CN013upU1R1yl5wVezP8k_!!6000000006618-2-tps-512-512.png"
/>
)}
triggerType="click"
>
<Menu onItemClick={(key, item) => window.open(key, '_blank')}>
{
urls.map((url: any) => <Menu.Item key={url.value}>{url.key}</Menu.Item>)
}
</Menu>
</Dropdown>
)
}
</div>
);
};
// 示例 Logo widget
const LogoSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, config } = ctx;
const scenarioDisplayName = config.get('scenarioDisplayName');
const scenarioInfo = config.get('scenarioInfo');
// 注册 logo widget
skeleton.add({
area: 'topArea',
type: 'Widget',
name: 'logo',
content: <Logo scenarioDisplayName={scenarioDisplayName} scenarioInfo={scenarioInfo} />,
contentProps: {
logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg',
href: 'https://lowcode-engine.cn',
},
props: {
align: 'left',
},
});
},
};
}
LogoSamplePlugin.pluginName = 'LogoSamplePlugin';
LogoSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default LogoSamplePlugin;

41
demo-basic-antd/src/plugins/plugin-preview-sample/index.tsx Normal file
View File

@ -0,0 +1,41 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import {
saveSchema,
} from '../../services/mockService';
// 保存功能示例
const PreviewSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, config } = ctx;
const doPreview = () => {
const scenarioName = config.get('scenarioName');
console.log('go preview with scenarioName:',scenarioName );
saveSchema(scenarioName);;
setTimeout(() => {
const search = location.search ? `${location.search}&scenarioName=${scenarioName}` : `?scenarioName=${scenarioName}`;
window.open(`./preview.html${search}`);
}, 500);
};
skeleton.add({
name: 'previewSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button type="primary" onClick={() => doPreview()}>
预览
</Button>
),
});
},
};
}
PreviewSamplePlugin.pluginName = 'PreviewSamplePlugin';
PreviewSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default PreviewSamplePlugin;

52
demo-basic-antd/src/plugins/plugin-save-sample/index.tsx Normal file
View File

@ -0,0 +1,52 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import {
saveSchema,
resetSchema,
} from '../../services/mockService';
// 保存功能示例
const SaveSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, hotkey, config } = ctx;
const scenarioName = config.get('scenarioName');
skeleton.add({
name: 'saveSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button onClick={() => saveSchema(scenarioName)}>
保存到本地
</Button>
),
});
skeleton.add({
name: 'resetSchema',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button onClick={() => resetSchema(scenarioName)}>
重置页面
</Button>
),
});
hotkey.bind('command+s', (e) => {
e.preventDefault();
saveSchema(scenarioName);
});
},
};
}
SaveSamplePlugin.pluginName = 'SaveSamplePlugin';
SaveSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default SaveSamplePlugin;

79
demo-basic-antd/src/preview.tsx Normal file
View File

@ -0,0 +1,79 @@
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Loading } from '@alifd/next';
import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils';
import ReactRenderer from '@alilc/lowcode-react-renderer';
import { injectComponents } from '@alilc/lowcode-plugin-inject';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'
import { getProjectSchemaFromLocalStorage, getPackagesFromLocalStorage } from './services/mockService';
const getScenarioName = function () {
if (location.search) {
return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index';
}
return 'index';
}
const SamplePreview = () => {
const [data, setData] = useState({});
async function init() {
const scenarioName = getScenarioName();
const packages = getPackagesFromLocalStorage(scenarioName);
const projectSchema = getProjectSchemaFromLocalStorage(scenarioName);
const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
const componentsMap: any = {};
componentsMapArray.forEach((component: any) => {
componentsMap[component.componentName] = component;
});
const schema = componentsTree[0];
const libraryMap = {};
const libraryAsset = [];
packages.forEach(({ package: _package, library, urls, renderUrls }) => {
libraryMap[_package] = library;
if (renderUrls) {
libraryAsset.push(renderUrls);
} else if (urls) {
libraryAsset.push(urls);
}
});
const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];
// TODO asset may cause pollution
const assetLoader = new AssetLoader();
await assetLoader.load(libraryAsset);
const components = await injectComponents(buildComponents(libraryMap, componentsMap));
setData({
schema,
components,
});
}
const { schema, components } = data;
if (!schema || !components) {
init();
return <Loading fullScreen />;
}
return (
<div className="lowcode-plugin-sample-preview">
<ReactRenderer
className="lowcode-plugin-sample-preview-content"
schema={schema}
components={components}
appHelper={{
requestHandlersMap: {
fetch: createFetchHandler()
}
}}
/>
</div>
);
};
ReactDOM.render(<SamplePreview />, document.getElementById('ice-container'));

0
src/scenarios/basic-antd/assets.json → demo-basic-antd/src/services/assets.json
View File

95
demo-basic-antd/src/services/mockService.ts Normal file
View File

@ -0,0 +1,95 @@
import { material, project } from '@alilc/lowcode-engine';
import { filterPackages } from '@alilc/lowcode-plugin-inject'
import { Message, Dialog } from '@alifd/next';
import { TransformStage } from '@alilc/lowcode-types';
import schema from './schema.json';
export const saveSchema = async (scenarioName: string = 'unknown') => {
setProjectSchemaToLocalStorage(scenarioName);
await setPackgesToLocalStorage(scenarioName);
Message.success('成功保存到本地');
};
export const resetSchema = async (scenarioName: string = 'unknown') => {
try {
await new Promise<void>((resolve, reject) => {
Dialog.confirm({
content: '确定要重置吗？您所有的修改都将消失！',
onOk: () => {
resolve();
},
onCancel: () => {
reject()
},
})
})
} catch(err) {
return;
}
let defaultSchema = schema || {
componentsTree: [{ componentName: 'Page', fileName: 'sample' }],
componentsMap: material.componentsMap,
version: '1.0.0',
i18n: {},
};
project.getCurrentDocument()?.importSchema(defaultSchema as any);
project.simulatorHost?.rerender();
setProjectSchemaToLocalStorage(scenarioName);
await setPackgesToLocalStorage(scenarioName);
Message.success('成功重置页面');
}
const getLSName = (scenarioName: string, ns: string = 'projectSchema') => `${scenarioName}:${ns}`;
export const getProjectSchemaFromLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
return JSON.parse(window.localStorage.getItem(getLSName(scenarioName)) || '{}');
}
const setProjectSchemaToLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
window.localStorage.setItem(
getLSName(scenarioName),
JSON.stringify(project.exportSchema(TransformStage.Save))
);
}
const setPackgesToLocalStorage = async (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
const packages = await filterPackages(material.getAssets().packages);
window.localStorage.setItem(
getLSName(scenarioName, 'packages'),
JSON.stringify(packages),
);
}
export const getPackagesFromLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
return JSON.parse(window.localStorage.getItem(getLSName(scenarioName, 'packages')) || '{}');
}
export const getPageSchema = async (scenarioName: string = 'unknown') => {
const pageSchema = getProjectSchemaFromLocalStorage(scenarioName).componentsTree?.[0];
if (pageSchema) {
return pageSchema;
}
console.log(`failed to get schema for scenarioName ${scenarioName} from localstorage, use default schema`, schema);
return schema;
};

0
src/scenarios/basic-antd/schema.json → demo-basic-antd/src/services/schema.json
View File

44
demo-basic-antd/tsconfig.json Normal file
View File

@ -0,0 +1,44 @@
{
"compilerOptions": {
"baseUrl": ".",
"declaration": true,
"lib": ["es2015", "dom"],
// Target latest version of ECMAScript.
"target": "esnext",
// Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
"module": "esnext",
// Search under node_modules for non-relative imports.
"moduleResolution": "node",
// Process & infer types from .js files.
"allowJs": true,
// Report errors in .js files.
"checkJs": false,
// Don't emit; allow Babel to transform files.
// "noEmit": true,
// Enable strictest settings like strictNullChecks & noImplicitAny.
"strict": true,
// Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
"allowSyntheticDefaultImports": true,
// Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
"esModuleInterop": true,
// Specify JSX code generation: 'preserve', 'react-native', or 'react'.
"jsx": "preserve",
// Import emit helpers (e.g. __extends, __rest, etc..) from tslib
"importHelpers": true,
// Enables experimental support for ES7 decorators.
"experimentalDecorators": true,
// Generates corresponding .map file.
"sourceMap": true,
// Disallow inconsistently-cased references to the same file.
"forceConsistentCasingInFileNames": true,
// Allow json import
"resolveJsonModule": true,
// skip type checking of declaration files
"skipLibCheck": true,
"outDir": "lib"
},
"include": [
"./src/"
],
"exclude": ["**/test", "**/lib", "**/es", "node_modules"]
}

7
demo-basic-fusion-with-single-component/.prettierrc.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
printWidth: 100,
tabWidth: 2,
semi: true,
singleQuote: true,
trailingComma: 'all',
};

0
src/scenarios/basic-fusion-with-single-component/README.md → demo-basic-fusion-with-single-component/README.md
View File

35
demo-basic-fusion-with-single-component/build.json Normal file
View File

@ -0,0 +1,35 @@
{
"entry": {
"preview": "./src/preview.tsx",
"index": "./src/index.ts"
},
"vendor": false,
"devServer": {
"hot": false
},
"publicPath": "/",
"externals": {
"react": "var window.React",
"react-dom": "var window.ReactDOM",
"prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next",
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
"moment": "var window.moment",
"lodash": "var window._"
},
"plugins": [
[
"build-plugin-react-app"
],
[
"build-plugin-moment-locales",
{
"locales": [
"zh-cn"
]
}
],
"./build.plugin.js"
]
}

57
demo-basic-fusion-with-single-component/build.plugin.js Normal file
View File

@ -0,0 +1,57 @@
const fs = require('fs-extra');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { version } = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [
{
configFile: './tsconfig.json',
},
]);
config.merge({
node: {
fs: 'empty',
},
});
config
.plugin('index')
.use(HtmlWebpackPlugin, [
{
inject: false,
minify: false,
templateParameters: {
version,
},
template: require.resolve('./public/index.ejs'),
filename: 'index.html',
},
]);
config
.plugin('preview')
.use(HtmlWebpackPlugin, [
{
inject: false,
templateParameters: {
},
template: require.resolve('./public/preview.html'),
filename: 'preview.html',
},
]);
config.plugins.delete('hot');
config.devServer.hot(false);
config.module // fixes https://github.com/graphql/graphql-js/issues/1272
.rule('mjs$')
.test(/\.mjs$/)
.include
.add(/node_modules/)
.end()
.type('javascript/auto');
});
};

58
demo-basic-fusion-with-single-component/package.json Normal file
View File

@ -0,0 +1,58 @@
{
"name": "@alilc/lowcode-demo-basic-fusion-with-single-component",
"version": "1.0.28",
"description": "Low-Code Engine 低代码搭建引擎 Demo 项目 - 基础Fusion组件+单自定义组件",
"repository": "git@github.com:alibaba/lowcode-demo.git",
"license": "MIT",
"main": "index.js",
"scripts": {
"start": "build-scripts start --disable-reload --port 5556",
"build": "build-scripts build",
"prepublishOnly": "npm run build",
"pub": "node ./scripts/watchdog.js && npm pub"
},
"files": [
"build"
],
"config": {},
"dependencies": {
"@alilc/lowcode-datasource-fetch-handler": "^1.0.1",
"@alilc/lowcode-plugin-code-editor": "^1.0.3",
"@alilc/lowcode-plugin-code-generator": "^1.0.4",
"@alilc/lowcode-plugin-components-pane": "^1.0.2",
"@alilc/lowcode-plugin-datasource-pane": "^1.0.6",
"@alilc/lowcode-plugin-inject": "^1.0.0",
"@alilc/lowcode-plugin-manual": "^1.0.3",
"@alilc/lowcode-plugin-schema": "^1.0.1",
"@alilc/lowcode-plugin-simulator-select": "^1.0.2",
"@alilc/lowcode-plugin-undo-redo": "^1.0.0",
"@alilc/lowcode-plugin-zh-en": "^1.0.0",
"@alilc/lowcode-plugin-set-ref-prop": "^1.0.1",
"@alilc/lowcode-react-renderer": "^1.0.0",
"@alilc/lowcode-setter-behavior": "^1.0.0",
"@alilc/lowcode-setter-title": "^1.0.2",
"@formily/antd": "^2.1.9",
"@formily/core": "^2.1.9",
"@formily/react": "^2.1.9",
"@seada/antd-plugins": "0.0.1-rc.3",
"antd": "^4.21.4",
"moment": "^2.29.3",
"uuid": "^8.3.2"
},
"devDependencies": {
"@alib/build-scripts": "^0.1.18",
"@alilc/lowcode-engine": "^1.0.0",
"@alilc/lowcode-engine-ext": "^1.0.0",
"@alilc/lowcode-types": "^1.0.0",
"@types/events": "^3.0.0",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",
"@types/streamsaver": "^2.0.0",
"@types/uuid": "^8.3.4",
"build-plugin-fusion": "^0.1.0",
"build-plugin-moment-locales": "^0.1.0",
"build-plugin-react-app": "^1.1.2",
"fs-extra": "^10.0.1",
"tsconfig-paths-webpack-plugin": "^3.2.0"
}
}

BIN
demo-basic-fusion-with-single-component/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

1
demo-basic-fusion-with-single-component/public/fixtures/basic-fusion-with-single-component/meta.js Normal file
View File

File diff suppressed because one or more lines are too long

0
demo-basic-fusion-with-single-component/public/fixtures/basic-fusion-with-single-component/view.css Normal file
View File

1
demo-basic-fusion-with-single-component/public/fixtures/basic-fusion-with-single-component/view.js Normal file
View File

@ -0,0 +1 @@
!function e(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.M220318=n():t.M220318=n()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function t(){return e.default}:function t(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=345)}({3:function(e,t){e.exports=window.React},345:function(e,t,n){e.exports=n(429)},346:function(e,t,n){},429:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));var r={};n.r(r),n.d(r,"default",(function(){return l}));var o=n(3),u=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n},f=function e(t,n){var r=t.title,f=t.content,i=u(t,["title","content"]);return o.createElement("div",Object.assign({ref:n,className:"ExampleComponent"},i),o.createElement("h1",null,r),f||"Hello ExampleComponent")},i=Object(o.forwardRef)(f);i.displayName="ExampleComponent";var l=i,c=n(346),a={},p="M220318",d=!0;function s(e,t){return e.default?e.default:e[t]?e[t]:e}}})}));

48
demo-basic-fusion-with-single-component/public/index.ejs Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>阿里低代码引擎 Demo</title>
<link rel="icon" href="//img.alicdn.com/imgextra/i2/O1CN01lNWGJi1xflgRfSgbk_!!6000000006471-55-tps-22-26.svg">
<link href="./css/index.css" rel="stylesheet" />
<!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
<link href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css" rel="stylesheet" />
<link href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css" rel="stylesheet" />
<!-- 低代码引擎的页面框架样式 -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.15/dist/css/engine-core.css" />
<!-- 低代码引擎官方扩展的样式 -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/css/engine-ext.css" />
<!-- React，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
<!-- React DOM，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<!-- React 向下兼容，预防物料层的依赖 -->
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
<!-- lodash，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<!-- 日期处理包，Fusion Next 的依赖 -->
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<!-- Fusion Next 的主包，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<!-- 低代码引擎的主包 -->
<script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.15/dist/js/engine-core.js"></script>
<!-- 低代码引擎官方扩展的主包 -->
<script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/js/engine-ext.js"></script>
<script>
console.log(
'%c AliLowCodeEngineDemo %c v<%= version %> ',
'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #b37feb; font-weight: bold;',
'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;',
);
</script>
</head>
<body>
<div id="lce-container"></div>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

1
demo-basic-fusion-with-single-component/public/index.html Normal file
View File

@ -0,0 +1 @@
勿删，删了有奇妙的 bug😄~

1
demo-basic-fusion-with-single-component/public/mock-pages.json Normal file
View File

@ -0,0 +1 @@
{"success":true,"content":[{"gmtModified":"2021-03-06 00:40:54","formUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","parentNavUuid":"NAV-SYSTEM-PARENT-UUID","hidden":"n","navUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","navType":"PAGE","isIndex":"n","isNew":"n","gmtCreate":"2021-03-06 00:27:26","title":{"en_US":"页面1","zh_CN":"页面1","type":"i18n"},"relateUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","parentId":0,"listOrder":0,"id":556103}]}

3
demo-basic-fusion-with-single-component/public/mock/info.json Normal file
View File

@ -0,0 +1,3 @@
{
"info": "Hello AliLowCode!!"
}

25
demo-basic-fusion-with-single-component/public/preview.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>阿里低代码引擎 Demo - 预览页</title>
<link href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css" rel="stylesheet">
<link href="./css/preview.css" rel="stylesheet">
</head>
<body>
<div id="ice-container"></div>
<script>
window.g_config = {
locale: 'zh_CN',
};
</script>
<script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js"></script>
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<script type="text/javascript" src="./js/preview.js"></script>
</body>
</html>

15
demo-basic-fusion-with-single-component/scripts/watchdog.js Executable file
View File

@ -0,0 +1,15 @@
#!/usr/bin/env node
const fs = require('fs');
const { join } = require('path');
const workingDir = process.cwd();
const pkg = JSON.parse(fs.readFileSync(join(workingDir, 'package.json'), 'utf-8'));
if (pkg.private) return;
const { files } = pkg;
files.forEach(file => {
const fileDir = join(workingDir, file);
if (!fs.existsSync(fileDir)) {
throw new Error(`${fileDir} does not exist, plz run build`);
}
});

55
demo-basic-fusion-with-single-component/src/global.scss Normal file
View File

@ -0,0 +1,55 @@
body {
font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
font-size: 12px;
* {
box-sizing: border-box;
}
}
body, #lce-container {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
text-rendering: optimizeLegibility;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
-webkit-font-smoothing: antialiased;
#engine {
width: 100%;
height: 100%;
}
}
html {
min-width: 1024px;
}
.save-sample {
width: 80px;
height: 30px;
background-color: #5584FF;
border: none;
outline: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
.load-assets {
width: 100px;
height: 30px;
background-color: #5584FF;
border: none;
outline: none;
border-radius: 4px;
color: white;
cursor: pointer;
}

106
demo-basic-fusion-with-single-component/src/index.ts Normal file
View File

@ -0,0 +1,106 @@
import { init, plugins } from '@alilc/lowcode-engine';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'
import EditorInitPlugin from './plugins/plugin-editor-init';
import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo';
import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';
import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane';
import SchemaPlugin from '@alilc/lowcode-plugin-schema';
import CodeEditorPlugin from "@alilc/lowcode-plugin-code-editor";
import ManualPlugin from "@alilc/lowcode-plugin-manual";
import InjectPlugin from '@alilc/lowcode-plugin-inject';
import SimulatorResizerPlugin from '@alilc/lowcode-plugin-simulator-select';
import ComponentPanelPlugin from './plugins/plugin-component-panel';
import DefaultSettersRegistryPlugin from './plugins/plugin-default-setters-registry';
import LoadIncrementalAssetsWidgetPlugin from './plugins/plugin-load-incremental-assets-widget';
import SaveSamplePlugin from './plugins/plugin-save-sample';
import PreviewSamplePlugin from './plugins/plugin-preview-sample';
import CustomSetterSamplePlugin from './plugins/plugin-custom-setter-sample';
import SetRefPropPlugin from '@alilc/lowcode-plugin-set-ref-prop';
import LogoSamplePlugin from './plugins/plugin-logo-sample';
import './global.scss';
async function registerPlugins() {
await plugins.register(EditorInitPlugin, {
scenarioName: 'basic-fusion-with-single-component',
displayName: '基础Fusion组件+单自定义组件',
info: {
urls: [
{
key: '设计器',
value: 'https://github.com/alibaba/lowcode-demo/tree/main/demo-basic-fusion-with-single-component',
},
],
},
});
// 设置内置 setter 和事件绑定、插件绑定面板
await plugins.register(DefaultSettersRegistryPlugin);
await plugins.register(LogoSamplePlugin);
await plugins.register(ComponentPanelPlugin);
await plugins.register(SchemaPlugin);
await plugins.register(ManualPlugin);
// 注册回退/前进
await plugins.register(UndoRedoPlugin);
// 注册中英文切换
await plugins.register(ZhEnPlugin);
await plugins.register(InjectPlugin);
await plugins.register(SetRefPropPlugin);
await plugins.register(SimulatorResizerPlugin);
await plugins.register(LoadIncrementalAssetsWidgetPlugin);
// 插件参数声明 & 传递，参考：https://www.yuque.com/lce/doc/ibh9fh#peEmG
await plugins.register(DataSourcePanePlugin, {
importPlugins: [],
dataSourceTypes: [
{
type: 'fetch',
},
{
type: 'jsonp',
}
]
});
await plugins.register(CodeEditorPlugin);
// 注册出码插件
await plugins.register(CodeGenPlugin);
await plugins.register(SaveSamplePlugin);
await plugins.register(PreviewSamplePlugin);
await plugins.register(CustomSetterSamplePlugin);
};
(async function main() {
await registerPlugins();
init(document.getElementById('lce-container')!, {
// locale: 'zh-CN',
enableCondition: true,
enableCanvasLock: true,
// 默认绑定变量
supportVariableGlobally: true,
// simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！
// 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径
simulatorUrl: [
'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css',
'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js'
],
requestHandlersMap: {
fetch: createFetchHandler()
},
});
})();

28
demo-basic-fusion-with-single-component/src/plugins/plugin-component-panel/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import { ILowCodePluginContext, project } from '@alilc/lowcode-engine';
import ComponentsPane from '@alilc/lowcode-plugin-components-pane';
const ComponentPanelPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton } = ctx;
// 注册组件面板
const componentsPane = skeleton.add({
area: 'leftArea',
type: 'PanelDock',
name: 'componentsPane',
content: ComponentsPane,
contentProps: {},
props: {
align: 'top',
icon: 'zujianku',
description: '组件库',
},
});
componentsPane?.disable?.();
project.onSimulatorRendererReady(() => {
componentsPane?.enable?.();
})
},
};
}
ComponentPanelPlugin.pluginName = 'ComponentPanelPlugin';
export default ComponentPanelPlugin;

19
demo-basic-fusion-with-single-component/src/plugins/plugin-custom-setter-sample/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import TitleSetter from '@alilc/lowcode-setter-title';
import BehaviorSetter from './setters/behavior-setter';
import CustomSetter from './setters/custom-setter';
// 保存功能示例
const CustomSetterSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { setters } = ctx;
setters.registerSetter('TitleSetter', TitleSetter);
setters.registerSetter('BehaviorSetter', BehaviorSetter);
setters.registerSetter('CustomSetter', CustomSetter);
},
};
}
CustomSetterSamplePlugin.pluginName = 'CustomSetterSamplePlugin';
export default CustomSetterSamplePlugin;

27
demo-basic-fusion-with-single-component/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx Normal file
View File

@ -0,0 +1,27 @@
import * as React from 'react';
import BehaviorSetter from '@alilc/lowcode-setter-behavior';
const defaultExtraBehaviorActions: any[] = [];
class LocalBehaviorSetter extends React.Component {
render() {
// ignore url && responseFormatter props, use default ones
const { url: propsUrl, responseFormatter: propsFormatter, extraBehaviorActions: propsExtraBehaviorActions = [], ...otherProps } = this.props;
const url = 'https://hn.algolia.com/api/v1/search?query';
const responseFormatter = (response) => response.hits.map((item) => ({
label: item.title,
value: item.author
}));
const extraBehaviorActions = propsExtraBehaviorActions.concat(defaultExtraBehaviorActions);
return (
<BehaviorSetter
{...otherProps}
url={url}
responseFormatter={responseFormatter}
extraBehaviorActions={extraBehaviorActions}
/>
);
}
}
export default LocalBehaviorSetter;

13
demo-basic-fusion-with-single-component/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx Normal file
View File

@ -0,0 +1,13 @@
import React, { Component } from 'react';
// import classNames from 'classnames';
class CustomSetter extends Component<any, any> {
render() {
const { defaultValue, value, onChange } = this.props;
const { editor } = this.props.field;
return <div>hello world</div>;
}
}
export default CustomSetter;

34
demo-basic-fusion-with-single-component/src/plugins/plugin-default-setters-registry/index.tsx Normal file
View File

@ -0,0 +1,34 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext';
// 设置内置 setter 和事件绑定、插件绑定面板
const DefaultSettersRegistryPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { setterMap, pluginMap } = AliLowCodeEngineExt;
const { setters, skeleton } = ctx;
// 注册setterMap
setters.registerSetter(setterMap);
// 注册插件
// 注册事件绑定面板
skeleton.add({
area: 'centerArea',
type: 'Widget',
content: pluginMap.EventBindDialog,
name: 'eventBindDialog',
props: {},
});
// 注册变量绑定面板
skeleton.add({
area: 'centerArea',
type: 'Widget',
content: pluginMap.VariableBindDialog,
name: 'variableBindDialog',
props: {},
});
},
};
}
DefaultSettersRegistryPlugin.pluginName = 'DefaultSettersRegistryPlugin';
export default DefaultSettersRegistryPlugin;

51
demo-basic-fusion-with-single-component/src/plugins/plugin-editor-init/index.tsx Normal file
View File

@ -0,0 +1,51 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { injectAssets } from '@alilc/lowcode-plugin-inject';
import assets from '../../services/assets.json';
import { getPageSchema } from '../../services/mockService';
const EditorInitPlugin = (ctx: ILowCodePluginContext, options: any) => {
return {
async init() {
const { material, project, config } = ctx;
const scenarioName = options['scenarioName'];
const scenarioDisplayName = options['displayName'] || scenarioName;
const scenarioInfo = options['info'] || {};
// 保存在config中用于引擎范围其他插件使用
config.set('scenarioName', scenarioName);
config.set('scenarioDisplayName', scenarioDisplayName);
config.set('scenarioInfo', scenarioInfo);
// 设置物料描述
await material.setAssets(await injectAssets(assets));
const schema = await getPageSchema();
// 加载 schema
project.openDocument(schema);
},
};
}
EditorInitPlugin.pluginName = 'EditorInitPlugin';
EditorInitPlugin.meta = {
preferenceDeclaration: {
title: '保存插件配置',
properties: [
{
key: 'scenarioName',
type: 'string',
description: '用于localstorage存储key',
},
{
key: 'displayName',
type: 'string',
description: '用于显示的场景名',
},
{
key: 'info',
type: 'object',
description: '用于扩展信息',
}
],
},
};
export default EditorInitPlugin;

170
demo-basic-fusion-with-single-component/src/plugins/plugin-load-incremental-assets-widget/index.tsx Normal file
View File

@ -0,0 +1,170 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import { material } from '@alilc/lowcode-engine';
import { Message } from '@alifd/next';
const loadIncrementalAssets = () => {
material?.onChangeAssets(() => {
Message.success('[MCBreadcrumb] 物料加载成功');
});
material.loadIncrementalAssets({
packages: [
{
title: 'MCBreadcrumb',
package: 'mc-breadcrumb',
version: '1.0.0',
urls: [
'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js',
'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css',
],
library: 'MCBreadcrumb',
},
],
components: [
{
componentName: 'MCBreadcrumb',
title: 'MCBreadcrumb',
docUrl: '',
screenshot: '',
npm: {
package: 'mc-breadcrumb',
version: '1.0.0',
exportName: 'MCBreadcrumb',
main: 'lib/index.js',
destructuring: false,
subName: '',
},
props: [
{
name: 'prefix',
propType: 'string',
description: '样式类名的品牌前缀',
defaultValue: 'next-',
},
{
name: 'title',
propType: 'string',
description: '标题',
defaultValue: 'next-',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'children',
propType: {
type: 'instanceOf',
value: 'node',
},
description: '面包屑子节点，需传入 Breadcrumb.Item',
},
{
name: 'maxNode',
propType: {
type: 'oneOfType',
value: [
'number',
{
type: 'oneOf',
value: ['auto'],
},
],
},
description:
'面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。',
defaultValue: 100,
},
{
name: 'separator',
propType: {
type: 'instanceOf',
value: 'node',
},
description: '分隔符，可以是文本或 Icon',
},
{
name: 'component',
propType: {
type: 'oneOfType',
value: ['string', 'func'],
},
description: '设置标签类型',
defaultValue: 'nav',
},
{
name: 'className',
propType: 'any',
},
{
name: 'style',
propType: 'object',
},
],
configure: {
component: {
isContainer: true,
isModel: true,
rootSelector: 'div.MCBreadcrumb',
},
},
},
],
componentList: [
{
title: '常用',
icon: '',
children: [
{
componentName: 'MCBreadcrumb',
title: 'MC面包屑',
icon: '',
package: 'mc-breadcrumb',
library: 'MCBreadcrumb',
snippets: [
{
title: 'MC面包屑',
screenshot:
'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png',
schema: {
componentName: 'MCBreadcrumb',
props: {
title: '物料中心',
prefix: 'next-',
maxNode: 100,
},
},
},
],
},
],
},
],
});
};
const LoadIncrementalAssetsWidgetPlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton } = ctx;
skeleton.add({
name: 'loadAssetsSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
width: 80,
},
content: (
<Button onClick={loadIncrementalAssets}>
异步加载资源
</Button>
),
});
},
};
}
LoadIncrementalAssetsWidgetPlugin.pluginName = 'LoadIncrementalAssetsWidgetPlugin';
export default LoadIncrementalAssetsWidgetPlugin;

25
demo-basic-fusion-with-single-component/src/plugins/plugin-logo-sample/index.scss Normal file
View File

@ -0,0 +1,25 @@
.lowcode-plugin-logo {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
width: 400px;
.logo {
display: block;
width: 139px;
height: 26px;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.scenario-name {
display: block;
margin-left: 20px;
margin-right: 5px;
font-size: 12px;
}
.info-dropdown {
display: block;
}
}

74
demo-basic-fusion-with-single-component/src/plugins/plugin-logo-sample/index.tsx Normal file
View File

@ -0,0 +1,74 @@
import React from 'react';
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Dropdown, Menu } from '@alifd/next';
import './index.scss';
export interface IProps {
logo?: string;
href?: string;
scenarioInfo?: any;
scenarioDisplayName?: string;
}
const Logo: React.FC<IProps> = (props): React.ReactElement => {
const { scenarioDisplayName, scenarioInfo } = props;
const urls = scenarioInfo?.urls || [];
return (
<div className="lowcode-plugin-logo">
<a className="logo" target="blank" href={props.href || 'https://lowcode-engine.cn'} style={{ backgroundImage: `url(${props.logo})` }} />
<div className="scenario-name">{scenarioDisplayName}</div>
{
urls && (
<Dropdown
className="info-dropdown"
trigger={(
<img
style={{
height: '18px',
position: 'relative',
top: '-2px',
}}
src="https://img.alicdn.com/imgextra/i4/O1CN013upU1R1yl5wVezP8k_!!6000000006618-2-tps-512-512.png"
/>
)}
triggerType="click"
>
<Menu onItemClick={(key, item) => window.open(key, '_blank')}>
{
urls.map((url: any) => <Menu.Item key={url.value}>{url.key}</Menu.Item>)
}
</Menu>
</Dropdown>
)
}
</div>
);
};
// 示例 Logo widget
const LogoSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, config } = ctx;
const scenarioDisplayName = config.get('scenarioDisplayName');
const scenarioInfo = config.get('scenarioInfo');
// 注册 logo widget
skeleton.add({
area: 'topArea',
type: 'Widget',
name: 'logo',
content: <Logo scenarioDisplayName={scenarioDisplayName} scenarioInfo={scenarioInfo} />,
contentProps: {
logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg',
href: 'https://lowcode-engine.cn',
},
props: {
align: 'left',
},
});
},
};
}
LogoSamplePlugin.pluginName = 'LogoSamplePlugin';
LogoSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default LogoSamplePlugin;

41
demo-basic-fusion-with-single-component/src/plugins/plugin-preview-sample/index.tsx Normal file
View File

@ -0,0 +1,41 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import {
saveSchema,
} from '../../services/mockService';
// 保存功能示例
const PreviewSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, config } = ctx;
const doPreview = () => {
const scenarioName = config.get('scenarioName');
console.log('go preview with scenarioName:',scenarioName );
saveSchema(scenarioName);;
setTimeout(() => {
const search = location.search ? `${location.search}&scenarioName=${scenarioName}` : `?scenarioName=${scenarioName}`;
window.open(`./preview.html${search}`);
}, 500);
};
skeleton.add({
name: 'previewSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button type="primary" onClick={() => doPreview()}>
预览
</Button>
),
});
},
};
}
PreviewSamplePlugin.pluginName = 'PreviewSamplePlugin';
PreviewSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default PreviewSamplePlugin;

52
demo-basic-fusion-with-single-component/src/plugins/plugin-save-sample/index.tsx Normal file
View File

@ -0,0 +1,52 @@
import { ILowCodePluginContext } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import {
saveSchema,
resetSchema,
} from '../../services/mockService';
// 保存功能示例
const SaveSamplePlugin = (ctx: ILowCodePluginContext) => {
return {
async init() {
const { skeleton, hotkey, config } = ctx;
const scenarioName = config.get('scenarioName');
skeleton.add({
name: 'saveSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button onClick={() => saveSchema(scenarioName)}>
保存到本地
</Button>
),
});
skeleton.add({
name: 'resetSchema',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button onClick={() => resetSchema(scenarioName)}>
重置页面
</Button>
),
});
hotkey.bind('command+s', (e) => {
e.preventDefault();
saveSchema(scenarioName);
});
},
};
}
SaveSamplePlugin.pluginName = 'SaveSamplePlugin';
SaveSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default SaveSamplePlugin;

79
demo-basic-fusion-with-single-component/src/preview.tsx Normal file
View File

@ -0,0 +1,79 @@
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Loading } from '@alifd/next';
import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils';
import ReactRenderer from '@alilc/lowcode-react-renderer';
import { injectComponents } from '@alilc/lowcode-plugin-inject';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'
import { getProjectSchemaFromLocalStorage, getPackagesFromLocalStorage } from './services/mockService';
const getScenarioName = function () {
if (location.search) {
return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index';
}
return 'index';
}
const SamplePreview = () => {
const [data, setData] = useState({});
async function init() {
const scenarioName = getScenarioName();
const packages = getPackagesFromLocalStorage(scenarioName);
const projectSchema = getProjectSchemaFromLocalStorage(scenarioName);
const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
const componentsMap: any = {};
componentsMapArray.forEach((component: any) => {
componentsMap[component.componentName] = component;
});
const schema = componentsTree[0];
const libraryMap = {};
const libraryAsset = [];
packages.forEach(({ package: _package, library, urls, renderUrls }) => {
libraryMap[_package] = library;
if (renderUrls) {
libraryAsset.push(renderUrls);
} else if (urls) {
libraryAsset.push(urls);
}
});
const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];
// TODO asset may cause pollution
const assetLoader = new AssetLoader();
await assetLoader.load(libraryAsset);
const components = await injectComponents(buildComponents(libraryMap, componentsMap));
setData({
schema,
components,
});
}
const { schema, components } = data;
if (!schema || !components) {
init();
return <Loading fullScreen />;
}
return (
<div className="lowcode-plugin-sample-preview">
<ReactRenderer
className="lowcode-plugin-sample-preview-content"
schema={schema}
components={components}
appHelper={{
requestHandlersMap: {
fetch: createFetchHandler()
}
}}
/>
</div>
);
};
ReactDOM.render(<SamplePreview />, document.getElementById('ice-container'));

0
src/scenarios/basic-fusion-with-single-component/assets.json → demo-basic-fusion-with-single-component/src/services/assets.json
View File

95
demo-basic-fusion-with-single-component/src/services/mockService.ts Normal file
View File

@ -0,0 +1,95 @@
import { material, project } from '@alilc/lowcode-engine';
import { filterPackages } from '@alilc/lowcode-plugin-inject'
import { Message, Dialog } from '@alifd/next';
import { TransformStage } from '@alilc/lowcode-types';
import schema from './schema.json';
export const saveSchema = async (scenarioName: string = 'unknown') => {
setProjectSchemaToLocalStorage(scenarioName);
await setPackgesToLocalStorage(scenarioName);
Message.success('成功保存到本地');
};
export const resetSchema = async (scenarioName: string = 'unknown') => {
try {
await new Promise<void>((resolve, reject) => {
Dialog.confirm({
content: '确定要重置吗？您所有的修改都将消失！',
onOk: () => {
resolve();
},
onCancel: () => {
reject()
},
})
})
} catch(err) {
return;
}
let defaultSchema = schema || {
componentsTree: [{ componentName: 'Page', fileName: 'sample' }],
componentsMap: material.componentsMap,
version: '1.0.0',
i18n: {},
};
project.getCurrentDocument()?.importSchema(defaultSchema as any);
project.simulatorHost?.rerender();
setProjectSchemaToLocalStorage(scenarioName);
await setPackgesToLocalStorage(scenarioName);
Message.success('成功重置页面');
}
const getLSName = (scenarioName: string, ns: string = 'projectSchema') => `${scenarioName}:${ns}`;
export const getProjectSchemaFromLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
return JSON.parse(window.localStorage.getItem(getLSName(scenarioName)) || '{}');
}
const setProjectSchemaToLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
window.localStorage.setItem(
getLSName(scenarioName),
JSON.stringify(project.exportSchema(TransformStage.Save))
);
}
const setPackgesToLocalStorage = async (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
const packages = await filterPackages(material.getAssets().packages);
window.localStorage.setItem(
getLSName(scenarioName, 'packages'),
JSON.stringify(packages),
);
}
export const getPackagesFromLocalStorage = (scenarioName: string) => {
if (!scenarioName) {
console.error('scenarioName is required!');
return;
}
return JSON.parse(window.localStorage.getItem(getLSName(scenarioName, 'packages')) || '{}');
}
export const getPageSchema = async (scenarioName: string = 'unknown') => {
const pageSchema = getProjectSchemaFromLocalStorage(scenarioName).componentsTree?.[0];
if (pageSchema) {
return pageSchema;
}
console.log(`failed to get schema for scenarioName ${scenarioName} from localstorage, use default schema`, schema);
return schema;
};

0
src/scenarios/basic-fusion-with-single-component/schema.json → demo-basic-fusion-with-single-component/src/services/schema.json
View File

Some files were not shown because too many files have changed in this diff Show More