init
zsynuting
commit
f34dd6cfd7
|
|
@ -0,0 +1,96 @@
|
||||||
|
# project custom
|
||||||
|
build
|
||||||
|
dist
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
lib
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# TypeScript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
.env.test
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# nuxt.js build output
|
||||||
|
.nuxt
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# mac config files
|
||||||
|
.DS_Store
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
module.exports = {
|
||||||
|
printWidth: 100,
|
||||||
|
tabWidth: 2,
|
||||||
|
semi: true,
|
||||||
|
singleQuote: true,
|
||||||
|
trailingComma: 'all',
|
||||||
|
};
|
||||||
|
|
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
{
|
||||||
|
"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": "^2.0.0",
|
||||||
|
"@alilc/lowcode-plugin-datasource-pane": "^1.0.9",
|
||||||
|
"@alilc/lowcode-plugin-inject": "^1.2.1",
|
||||||
|
"@alilc/lowcode-plugin-manual": "^1.0.4",
|
||||||
|
"@alilc/lowcode-plugin-schema": "^1.0.2",
|
||||||
|
"@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.1.2",
|
||||||
|
"@alilc/lowcode-setter-behavior": "^1.0.0",
|
||||||
|
"@alilc/lowcode-setter-title": "^1.0.2",
|
||||||
|
"antd": "^4.21.4",
|
||||||
|
"moment": "^2.29.3",
|
||||||
|
"uuid": "^8.3.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@alib/build-scripts": "^0.1.18",
|
||||||
|
"@alilc/lowcode-engine": "^1.1.2",
|
||||||
|
"@alilc/lowcode-engine-ext": "^1.0.0",
|
||||||
|
"@alilc/lowcode-types": "^1.1.1",
|
||||||
|
"@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"
|
||||||
|
},
|
||||||
|
"resolutions": {
|
||||||
|
"@babel/core": "7.20.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -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://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.3.3-beta.0/dist/css/engine-core.css" />
|
||||||
|
<!-- 低代码引擎官方扩展的样式 -->
|
||||||
|
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css" />
|
||||||
|
|
||||||
|
<!-- React，可替换为 production 包 -->
|
||||||
|
<script src="https://g.alicdn.com/code/lib/react/16.14.0/umd/react.production.min.js"></script>
|
||||||
|
<!-- React DOM，可替换为 production 包 -->
|
||||||
|
<script src="https://g.alicdn.com/code/lib/react-dom/16.14.0/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.24.18/next.min.js"></script>
|
||||||
|
<!-- 低代码引擎的主包 -->
|
||||||
|
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.3.3-beta.0/dist/js/engine-core.js"></script>
|
||||||
|
<!-- 低代码引擎官方扩展的主包 -->
|
||||||
|
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/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>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
勿删，删了有奇妙的 bug😄~
|
||||||
|
|
@ -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}]}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"info": "Hello AliLowCode!!"
|
||||||
|
}
|
||||||
|
|
@ -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.24.18/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.14.0/umd/react.production.min.js"></script>
|
||||||
|
<script src="https://g.alicdn.com/code/lib/react-dom/16.14.0/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.24.18/next.min.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/preview.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -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,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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
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 '@alilc/lowcode-plugin-components-pane';
|
||||||
|
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(InjectPlugin);
|
||||||
|
|
||||||
|
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(SetRefPropPlugin);
|
||||||
|
|
||||||
|
await plugins.register(SimulatorResizerPlugin);
|
||||||
|
|
||||||
|
await plugins.register(LoadIncrementalAssetsWidgetPlugin);
|
||||||
|
|
||||||
|
|
||||||
|
// 插件参数声明 & 传递，参考：https://lowcode-engine.cn/site/docs/api/plugins#设置插件参数版本示例
|
||||||
|
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,
|
||||||
|
requestHandlersMap: {
|
||||||
|
fetch: createFetchHandler()
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||||
|
import TitleSetter from '@alilc/lowcode-setter-title';
|
||||||
|
import BehaviorSetter from './setters/behavior-setter';
|
||||||
|
import CustomSetter from './setters/custom-setter';
|
||||||
|
|
||||||
|
// 保存功能示例
|
||||||
|
const CustomSetterSamplePlugin = (ctx: IPublicModelPluginContext) => {
|
||||||
|
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,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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||||
|
import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext';
|
||||||
|
|
||||||
|
// 设置内置 setter 和事件绑定、插件绑定面板
|
||||||
|
const DefaultSettersRegistryPlugin = (ctx: IPublicModelPluginContext) => {
|
||||||
|
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;
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||||
|
import { injectAssets } from '@alilc/lowcode-plugin-inject';
|
||||||
|
import assets from '../../services/assets.json';
|
||||||
|
import { getPageSchema } from '../../services/mockService';
|
||||||
|
const EditorInitPlugin = (ctx: IPublicModelPluginContext, 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(scenarioName);
|
||||||
|
|
||||||
|
// 加载 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;
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||||
|
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: IPublicModelPluginContext) => {
|
||||||
|
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;
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||||
|
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: IPublicModelPluginContext) => {
|
||||||
|
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;
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||||
|
import { Button } from '@alifd/next';
|
||||||
|
import {
|
||||||
|
saveSchema,
|
||||||
|
} from '../../services/mockService';
|
||||||
|
|
||||||
|
// 保存功能示例
|
||||||
|
const PreviewSamplePlugin = (ctx: IPublicModelPluginContext) => {
|
||||||
|
return {
|
||||||
|
async init() {
|
||||||
|
const { skeleton, config } = ctx;
|
||||||
|
const doPreview = () => {
|
||||||
|
const scenarioName = config.get('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;
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||||
|
import { Button } from '@alifd/next';
|
||||||
|
import {
|
||||||
|
saveSchema,
|
||||||
|
resetSchema,
|
||||||
|
} from '../../services/mockService';
|
||||||
|
|
||||||
|
// 保存功能示例
|
||||||
|
const SaveSamplePlugin = (ctx: IPublicModelPluginContext) => {
|
||||||
|
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;
|
||||||
|
|
@ -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,0 +1,76 @@
|
||||||
|
{
|
||||||
|
"packages": [
|
||||||
|
{
|
||||||
|
"package": "moment",
|
||||||
|
"version": "2.24.0",
|
||||||
|
"urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"],
|
||||||
|
"library": "moment"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"package": "lodash",
|
||||||
|
"library": "_",
|
||||||
|
"urls": ["https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"package": "iconfont-icons",
|
||||||
|
"urls": "//at.alicdn.com/t/font_2369445_ukrtsovd92r.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"package": "@ant-design/icons",
|
||||||
|
"version": "4.7.0",
|
||||||
|
"urls": ["//g.alicdn.com/code/npm/@ali/ant-design-icons-cdn/4.5.0/index.umd.min.js"],
|
||||||
|
"library": "icons"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"package": "antd",
|
||||||
|
"version": "4.19.5",
|
||||||
|
"urls": [
|
||||||
|
"//g.alicdn.com/code/lib/antd/4.23.0/antd.min.js",
|
||||||
|
"//g.alicdn.com/code/lib/antd/4.23.0/antd.min.css"
|
||||||
|
],
|
||||||
|
"library": "antd"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "fusion组件库",
|
||||||
|
"package": "@alifd/next",
|
||||||
|
"version": "1.26.4",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/code/lib/alifd__next/1.26.4/next.min.css",
|
||||||
|
"https://g.alicdn.com/code/lib/alifd__next/1.26.4/next-with-locales.min.js"
|
||||||
|
],
|
||||||
|
"library": "Next"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"package": "@alilc/antd-lowcode-materials",
|
||||||
|
"version": "1.2.1",
|
||||||
|
"library": "AntdLowcode",
|
||||||
|
"urls": [
|
||||||
|
"https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/view.js",
|
||||||
|
"https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/view.css"
|
||||||
|
],
|
||||||
|
"editUrls": [
|
||||||
|
"https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/view.js",
|
||||||
|
"https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/view.css"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"exportName": "AlilcAntdLowcodeMaterialsMeta",
|
||||||
|
"npm": {
|
||||||
|
"package": "@alilc/antd-lowcode-materials",
|
||||||
|
"version": "1.2.1"
|
||||||
|
},
|
||||||
|
"url": "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/meta.js",
|
||||||
|
"urls": {
|
||||||
|
"default": "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/meta.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"sort": {
|
||||||
|
"groupList": ["精选组件", "原子组件"],
|
||||||
|
"categoryList": ["通用", "导航", "信息输入", "信息展示", "信息反馈"]
|
||||||
|
},
|
||||||
|
"groupList": ["精选组件", "原子组件"],
|
||||||
|
"ignoreComponents": {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { material, project } from '@alilc/lowcode-engine';
|
||||||
|
import { filterPackages } from '@alilc/lowcode-plugin-inject'
|
||||||
|
import { Message, Dialog } from '@alifd/next';
|
||||||
|
import { IPublicEnumTransformStage } from '@alilc/lowcode-types';
|
||||||
|
import schema from './schema.json';
|
||||||
|
|
||||||
|
export const saveSchema = async (scenarioName: string = 'unknown') => {
|
||||||
|
setProjectSchemaToLocalStorage(scenarioName);
|
||||||
|
await setPackagesToLocalStorage(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 setPackagesToLocalStorage(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(IPublicEnumTransformStage.Save))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const setPackagesToLocalStorage = 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
return schema;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
{
|
||||||
|
"componentName": "Page",
|
||||||
|
"id": "node_dockcviv8fo1",
|
||||||
|
"props": {
|
||||||
|
"ref": "outerView",
|
||||||
|
"style": {
|
||||||
|
"height": "100%"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"fileName": "/",
|
||||||
|
"dataSource": {
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"type": "fetch",
|
||||||
|
"isInit": true,
|
||||||
|
"options": {
|
||||||
|
"params": {},
|
||||||
|
"method": "GET",
|
||||||
|
"isCors": true,
|
||||||
|
"timeout": 5000,
|
||||||
|
"headers": {},
|
||||||
|
"uri": "mock/info.json"
|
||||||
|
},
|
||||||
|
"id": "info",
|
||||||
|
"shouldFetch": {
|
||||||
|
"type": "JSFunction",
|
||||||
|
"value": "function() { \n console.log('should fetch.....');\n return true; \n}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"state": {
|
||||||
|
"text": {
|
||||||
|
"type": "JSExpression",
|
||||||
|
"value": "\"outer\""
|
||||||
|
},
|
||||||
|
"isShowDialog": {
|
||||||
|
"type": "JSExpression",
|
||||||
|
"value": "false"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}",
|
||||||
|
"lifeCycles": {
|
||||||
|
"componentDidMount": {
|
||||||
|
"type": "JSFunction",
|
||||||
|
"value": "function componentDidMount() {\n console.log('did mount');\n}"
|
||||||
|
},
|
||||||
|
"componentWillUnmount": {
|
||||||
|
"type": "JSFunction",
|
||||||
|
"value": "function componentWillUnmount() {\n console.log('will unmount');\n}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"methods": {
|
||||||
|
"testFunc": {
|
||||||
|
"type": "JSFunction",
|
||||||
|
"value": "function testFunc() {\n console.log('test func');\n}"
|
||||||
|
},
|
||||||
|
"onClick": {
|
||||||
|
"type": "JSFunction",
|
||||||
|
"value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}"
|
||||||
|
},
|
||||||
|
"closeDialog": {
|
||||||
|
"type": "JSFunction",
|
||||||
|
"value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}",
|
||||||
|
"hidden": false,
|
||||||
|
"title": "",
|
||||||
|
"isLocked": false,
|
||||||
|
"condition": true,
|
||||||
|
"conditionGroup": ""
|
||||||
|
}
|
||||||
|
|
@ -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"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue