From a625469ffb36cb5e76c867d944bbc72e79363264 Mon Sep 17 00:00:00 2001 From: "xuanji.w" <1021281778@qq.com> Date: Mon, 9 Jan 2023 12:09:55 +0800 Subject: [PATCH] feat: add lowcode-component demo --- build.json | 5 +- demo-lowcode-component/.prettierrc.js | 7 + demo-lowcode-component/build.json | 35 ++ demo-lowcode-component/build.plugin.js | 57 ++ demo-lowcode-component/package.json | 57 ++ demo-lowcode-component/public/favicon.png | Bin 0 -> 3612 bytes .../meta.js | 1 + .../view.css | 0 .../view.js | 1 + demo-lowcode-component/public/index.ejs | 48 ++ demo-lowcode-component/public/index.html | 1 + demo-lowcode-component/public/mock-pages.json | 1 + demo-lowcode-component/public/mock/info.json | 3 + demo-lowcode-component/public/preview.html | 25 + demo-lowcode-component/scripts/watchdog.js | 15 + demo-lowcode-component/src/global.scss | 55 ++ demo-lowcode-component/src/index.ts | 92 +++ demo-lowcode-component/src/parse-assets.ts | 147 +++++ .../plugins/plugin-component-panel/index.tsx | 28 + .../plugin-custom-setter-sample/index.tsx | 19 + .../setters/behavior-setter.tsx | 27 + .../setters/custom-setter.tsx | 13 + .../plugin-default-setters-registry/index.tsx | 34 ++ .../src/plugins/plugin-editor-init/index.tsx | 51 ++ .../index.tsx | 170 ++++++ .../src/plugins/plugin-logo-sample/index.scss | 25 + .../src/plugins/plugin-logo-sample/index.tsx | 74 +++ .../plugins/plugin-preview-sample/index.tsx | 40 ++ .../src/plugins/plugin-save-sample/index.tsx | 52 ++ demo-lowcode-component/src/preview.tsx | 63 +++ .../src/services/assets.json | 466 ++++++++++++++++ .../src/services/mockService.ts | 94 ++++ .../src/services/schema.json | 73 +++ demo-lowcode-component/tsconfig.json | 44 ++ demo-next-pro/src/services/assets.json | 526 +++++++++++++++--- 35 files changed, 2276 insertions(+), 73 deletions(-) create mode 100644 demo-lowcode-component/.prettierrc.js create mode 100644 demo-lowcode-component/build.json create mode 100644 demo-lowcode-component/build.plugin.js create mode 100644 demo-lowcode-component/package.json create mode 100644 demo-lowcode-component/public/favicon.png create mode 100644 demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/meta.js create mode 100644 demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/view.css create mode 100644 demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/view.js create mode 100644 demo-lowcode-component/public/index.ejs create mode 100644 demo-lowcode-component/public/index.html create mode 100644 demo-lowcode-component/public/mock-pages.json create mode 100644 demo-lowcode-component/public/mock/info.json create mode 100644 demo-lowcode-component/public/preview.html create mode 100755 demo-lowcode-component/scripts/watchdog.js create mode 100644 demo-lowcode-component/src/global.scss create mode 100644 demo-lowcode-component/src/index.ts create mode 100644 demo-lowcode-component/src/parse-assets.ts create mode 100644 demo-lowcode-component/src/plugins/plugin-component-panel/index.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-custom-setter-sample/index.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-default-setters-registry/index.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-editor-init/index.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-load-incremental-assets-widget/index.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-logo-sample/index.scss create mode 100644 demo-lowcode-component/src/plugins/plugin-logo-sample/index.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-preview-sample/index.tsx create mode 100644 demo-lowcode-component/src/plugins/plugin-save-sample/index.tsx create mode 100644 demo-lowcode-component/src/preview.tsx create mode 100644 demo-lowcode-component/src/services/assets.json create mode 100644 demo-lowcode-component/src/services/mockService.ts create mode 100644 demo-lowcode-component/src/services/schema.json create mode 100644 demo-lowcode-component/tsconfig.json diff --git a/build.json b/build.json index b15027b..97409a7 100644 --- a/build.json +++ b/build.json @@ -22,7 +22,10 @@ "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" + "demo-node-extended-actions/preview" : "./demo-node-extended-actions/src/preview.tsx", + + "demo-lowcode-component/index": "./demo-lowcode-component/src/index.ts", + "demo-lowcode-component/preview": "./demo-lowcode-component/src/preview.tsx" }, "vendor": false, "devServer": { diff --git a/demo-lowcode-component/.prettierrc.js b/demo-lowcode-component/.prettierrc.js new file mode 100644 index 0000000..24c5859 --- /dev/null +++ b/demo-lowcode-component/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', +}; diff --git a/demo-lowcode-component/build.json b/demo-lowcode-component/build.json new file mode 100644 index 0000000..1d9ea4a --- /dev/null +++ b/demo-lowcode-component/build.json @@ -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" + ] +} diff --git a/demo-lowcode-component/build.plugin.js b/demo-lowcode-component/build.plugin.js new file mode 100644 index 0000000..8796fea --- /dev/null +++ b/demo-lowcode-component/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'); + }); +}; diff --git a/demo-lowcode-component/package.json b/demo-lowcode-component/package.json new file mode 100644 index 0000000..48f5bf2 --- /dev/null +++ b/demo-lowcode-component/package.json @@ -0,0 +1,57 @@ +{ + "name": "@alilc/lowcode-demo-lowcode-component", + "version": "1.0.28", + "description": "Low-Code Engine 低代码搭建引擎 Demo 项目 - 低代码组件", + "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.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.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", + "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" + } +} diff --git a/demo-lowcode-component/public/favicon.png b/demo-lowcode-component/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..307ffbd82dba398d6db6459102bff331eef7df6b GIT binary patch literal 3612 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.length)&&(t=e.length);for(var n=0,r=new Array(t);n1&&void 0!==arguments[1]?arguments[1]:"m-220318",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"0.1.0",r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{"@alifd/next":"1.25.23","@alifd/meet":"2.6.3",antd:"4.17.3"};if(!e||!n)return e;var o=e.npm;return o?("object"===d(r)&&r[o.package]?e.npm=m(m({},o),{},{version:r[o.package]}):o.package===t&&(e.npm=m(m({},o),{},{version:n})),e):e}["\u57fa\u7840\u5143\u7d20","\u5e03\u5c40\u5bb9\u5668\u7c7b","\u8868\u683c\u7c7b","\u8868\u5355\u8be6\u60c5\u7c7b","\u5e2e\u52a9\u7c7b","\u5bf9\u8bdd\u6846\u7c7b","\u4e1a\u52a1\u7c7b","\u901a\u7528","\u5f15\u5bfc","\u4fe1\u606f\u8f93\u5165","\u4fe1\u606f\u5c55\u793a","\u4fe1\u606f\u53cd\u9988"].reverse().forEach((function(e,t){b[e]=++t}));var v,S=[];[i].forEach((function(e){Array.isArray(e)?S.push.apply(S,c(e.map((function(e){return h(e)})))):e.components?S.push.apply(S,c(e.components.map((function(e){return h(e)})))):S.push(h(e))}));var O=g(S),j=!0}])})); \ No newline at end of file diff --git a/demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/view.css b/demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/view.css new file mode 100644 index 0000000..e69de29 diff --git a/demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/view.js b/demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/view.js new file mode 100644 index 0000000..39c2ac3 --- /dev/null +++ b/demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/view.js @@ -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 + + + + + + 阿里低代码引擎 Demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/demo-lowcode-component/public/index.html b/demo-lowcode-component/public/index.html new file mode 100644 index 0000000..9992af0 --- /dev/null +++ b/demo-lowcode-component/public/index.html @@ -0,0 +1 @@ +勿删，删了有奇妙的 bug😄~ \ No newline at end of file diff --git a/demo-lowcode-component/public/mock-pages.json b/demo-lowcode-component/public/mock-pages.json new file mode 100644 index 0000000..9251342 --- /dev/null +++ b/demo-lowcode-component/public/mock-pages.json @@ -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}]} \ No newline at end of file diff --git a/demo-lowcode-component/public/mock/info.json b/demo-lowcode-component/public/mock/info.json new file mode 100644 index 0000000..006209b --- /dev/null +++ b/demo-lowcode-component/public/mock/info.json @@ -0,0 +1,3 @@ +{ + "info": "Hello AliLowCode!!" +} \ No newline at end of file diff --git a/demo-lowcode-component/public/preview.html b/demo-lowcode-component/public/preview.html new file mode 100644 index 0000000..3ffe43b --- /dev/null +++ b/demo-lowcode-component/public/preview.html @@ -0,0 +1,25 @@ + + + + + + 阿里低代码引擎 Demo - 预览页 + + + + +
+ + + + + + + + + + diff --git a/demo-lowcode-component/scripts/watchdog.js b/demo-lowcode-component/scripts/watchdog.js new file mode 100755 index 0000000..57964a5 --- /dev/null +++ b/demo-lowcode-component/scripts/watchdog.js @@ -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`); + } +}); diff --git a/demo-lowcode-component/src/global.scss b/demo-lowcode-component/src/global.scss new file mode 100644 index 0000000..02906a3 --- /dev/null +++ b/demo-lowcode-component/src/global.scss @@ -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; +} diff --git a/demo-lowcode-component/src/index.ts b/demo-lowcode-component/src/index.ts new file mode 100644 index 0000000..4cd84c0 --- /dev/null +++ b/demo-lowcode-component/src/index.ts @@ -0,0 +1,92 @@ +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: 'lowcode-component', + displayName: '低代码组件', + info: { + urls: [ + { + key: '设计器', + value: 'https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component', + }, + ], + }, + }); + + // 设置内置 setter 和事件绑定、插件绑定面板 + await plugins.register(DefaultSettersRegistryPlugin); + + await plugins.register(ComponentPanelPlugin); + + await plugins.register(SchemaPlugin); + + await plugins.register(ManualPlugin); + + await plugins.register(InjectPlugin); + + await plugins.register(SetRefPropPlugin); + + await plugins.register(SimulatorResizerPlugin); + + + // 插件参数声明 & 传递，参考：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(SaveSamplePlugin); + + await plugins.register(PreviewSamplePlugin); +}; + +(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@1.1.0-beta.9/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@1.1.0-beta.9/dist/js/react-simulator-renderer.js' + ], + requestHandlersMap: { + fetch: createFetchHandler() + }, + }); +})(); diff --git a/demo-lowcode-component/src/parse-assets.ts b/demo-lowcode-component/src/parse-assets.ts new file mode 100644 index 0000000..0245949 --- /dev/null +++ b/demo-lowcode-component/src/parse-assets.ts @@ -0,0 +1,147 @@ +import { ComponentDescription, ComponentSchema, RemoteComponentDescription } from '@alilc/lowcode-types'; +import { buildComponents, AssetsJson, AssetLoader } from '@alilc/lowcode-utils'; +import ReactRenderer from '@alilc/lowcode-react-renderer'; +import { injectComponents } from '@alilc/lowcode-plugin-inject'; + +import React, { createElement } from 'react'; + + +function genLowcodeComp(schema: ComponentSchema, components: any) { + return class LowcodeComp extends React.Component { + render(): React.ReactNode { + return createElement(ReactRenderer, { + ...this.props, + schema, + components, + designMode: '', + }); + } + }; +} + + +export async function parseAssets(assets: AssetsJson) { + const { components: rawComponents, packages } = assets; + + + const libraryAsset = []; + const libraryMap = {}; + const packagesMap = {}; + packages.forEach(pkg => { + const { package: _package, library, urls, renderUrls, id } = pkg; + if (_package) { + libraryMap[id || _package] = library; + } + packagesMap[id || _package] = pkg; + if (renderUrls) { + libraryAsset.push(renderUrls); + } else if (urls) { + libraryAsset.push(urls); + } + }); + + const assetLoader = new AssetLoader(); + await assetLoader.load(libraryAsset); + + let newComponents = rawComponents; + if (rawComponents && rawComponents.length) { + const componentDescriptions: ComponentDescription[] = []; + const remoteComponentDescriptions: RemoteComponentDescription[] = []; + rawComponents.forEach((component: any) => { + if (!component) { + return; + } + if (component.exportName && component.url) { + remoteComponentDescriptions.push(component); + } else { + componentDescriptions.push(component); + } + }); + newComponents = [...componentDescriptions]; + + // 如果有远程组件描述协议，则自动加载并补充到资产包中，同时出发 designer.incrementalAssetsReady 通知组件面板更新数据 + if (remoteComponentDescriptions && remoteComponentDescriptions.length) { + await Promise.all( + remoteComponentDescriptions.map(async (component: any) => { + const { exportName, url, npm } = component; + await (new AssetLoader()).load(url); + function setAssetsComponent(component: any, extraNpmInfo: any = {}) { + const components = component.components; + if (Array.isArray(components)) { + components.forEach(d => { + newComponents = newComponents.concat({ + npm: { + ...npm, + ...extraNpmInfo, + }, + ...d, + } || []); + }); + return; + } + newComponents = newComponents.concat({ + npm: { + ...npm, + ...extraNpmInfo, + }, + ...component.components, + } || []); + // assets.componentList = assets.componentList.concat(component.componentList || []); + } + function setArrayAssets(value: any[], preExportName: string = '', preSubName: string = '') { + value.forEach((d: any, i: number) => { + const exportName = [preExportName, i.toString()].filter(d => !!d).join('.'); + const subName = [preSubName, i.toString()].filter(d => !!d).join('.'); + Array.isArray(d) ? setArrayAssets(d, exportName, subName) : setAssetsComponent(d, { + exportName, + subName, + }); + }); + } + if (window[exportName]) { + if (Array.isArray(window[exportName])) { + setArrayAssets(window[exportName] as any); + } else { + setAssetsComponent(window[exportName] as any); + } + } + return window[exportName]; + }), + ); + } + } + const lowcodeComponentsArray = []; + const proCodeComponentsMap = newComponents.reduce((acc, cur) => { + if ((cur.devMode || '').toLowerCase() === 'lowcode') { + lowcodeComponentsArray.push(cur); + } else { + acc[cur.componentName] = { + ...(cur.reference || cur.npm), + componentName: cur.componentName, + }; + } + return acc; + }, {}) + + + function genLowCodeComponentsMap(components) { + const lowcodeComponentsMap = {}; + lowcodeComponentsArray.forEach((lowcode) => { + const id = lowcode.reference?.id; + const schema = packagesMap[id]?.schema; + const comp = genLowcodeComp(schema, {...components, ...lowcodeComponentsMap}); + lowcodeComponentsMap[lowcode.componentName] = comp; + }); + return lowcodeComponentsMap; + } + + + let components = await injectComponents(buildComponents(libraryMap, proCodeComponentsMap)); + + const lowCodeComponents = genLowCodeComponentsMap(components); + + + return { + components: { ...components, ...lowCodeComponents } + } +} diff --git a/demo-lowcode-component/src/plugins/plugin-component-panel/index.tsx b/demo-lowcode-component/src/plugins/plugin-component-panel/index.tsx new file mode 100644 index 0000000..42c3a91 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-component-panel/index.tsx @@ -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; \ No newline at end of file diff --git a/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/index.tsx b/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/index.tsx new file mode 100644 index 0000000..7c52db1 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/index.tsx @@ -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; \ No newline at end of file diff --git a/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx b/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx new file mode 100644 index 0000000..34e9be5 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx @@ -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 ( + + ); + } +} + +export default LocalBehaviorSetter; \ No newline at end of file diff --git a/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx b/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx new file mode 100644 index 0000000..9fe9d51 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; +// import classNames from 'classnames'; + +class CustomSetter extends Component { + render() { + const { defaultValue, value, onChange } = this.props; + const { editor } = this.props.field; + + return
hello world
; + } +} + +export default CustomSetter; diff --git a/demo-lowcode-component/src/plugins/plugin-default-setters-registry/index.tsx b/demo-lowcode-component/src/plugins/plugin-default-setters-registry/index.tsx new file mode 100644 index 0000000..5da7ec5 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-default-setters-registry/index.tsx @@ -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; \ No newline at end of file diff --git a/demo-lowcode-component/src/plugins/plugin-editor-init/index.tsx b/demo-lowcode-component/src/plugins/plugin-editor-init/index.tsx new file mode 100644 index 0000000..d42716b --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-editor-init/index.tsx @@ -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(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; \ No newline at end of file diff --git a/demo-lowcode-component/src/plugins/plugin-load-incremental-assets-widget/index.tsx b/demo-lowcode-component/src/plugins/plugin-load-incremental-assets-widget/index.tsx new file mode 100644 index 0000000..0b0bb9d --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-load-incremental-assets-widget/index.tsx @@ -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: ( + + ), + }); + }, + }; +} +LoadIncrementalAssetsWidgetPlugin.pluginName = 'LoadIncrementalAssetsWidgetPlugin'; +export default LoadIncrementalAssetsWidgetPlugin; \ No newline at end of file diff --git a/demo-lowcode-component/src/plugins/plugin-logo-sample/index.scss b/demo-lowcode-component/src/plugins/plugin-logo-sample/index.scss new file mode 100644 index 0000000..d8b63f6 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-logo-sample/index.scss @@ -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; + } +} diff --git a/demo-lowcode-component/src/plugins/plugin-logo-sample/index.tsx b/demo-lowcode-component/src/plugins/plugin-logo-sample/index.tsx new file mode 100644 index 0000000..7e4c337 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-logo-sample/index.tsx @@ -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 = (props): React.ReactElement => { + const { scenarioDisplayName, scenarioInfo } = props; + const urls = scenarioInfo?.urls || []; + return ( + + ); +}; +// 示例 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: , + 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; \ No newline at end of file diff --git a/demo-lowcode-component/src/plugins/plugin-preview-sample/index.tsx b/demo-lowcode-component/src/plugins/plugin-preview-sample/index.tsx new file mode 100644 index 0000000..d983ac4 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-preview-sample/index.tsx @@ -0,0 +1,40 @@ +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'); + 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: ( + + ), + }); + }, + }; +} +PreviewSamplePlugin.pluginName = 'PreviewSamplePlugin'; +PreviewSamplePlugin.meta = { + dependencies: ['EditorInitPlugin'], +}; +export default PreviewSamplePlugin; \ No newline at end of file diff --git a/demo-lowcode-component/src/plugins/plugin-save-sample/index.tsx b/demo-lowcode-component/src/plugins/plugin-save-sample/index.tsx new file mode 100644 index 0000000..d347aa3 --- /dev/null +++ b/demo-lowcode-component/src/plugins/plugin-save-sample/index.tsx @@ -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: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema(scenarioName); + }); + }, + }; +} +SaveSamplePlugin.pluginName = 'SaveSamplePlugin'; +SaveSamplePlugin.meta = { + dependencies: ['EditorInitPlugin'], +}; +export default SaveSamplePlugin; \ No newline at end of file diff --git a/demo-lowcode-component/src/preview.tsx b/demo-lowcode-component/src/preview.tsx new file mode 100644 index 0000000..f18d9f3 --- /dev/null +++ b/demo-lowcode-component/src/preview.tsx @@ -0,0 +1,63 @@ +import ReactDOM from 'react-dom'; +import React, { useState } from 'react'; +import { Loading } from '@alifd/next'; +import ReactRenderer from '@alilc/lowcode-react-renderer'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; +import { + getProjectSchemaFromLocalStorage, +} from './services/mockService'; +import assets from './services/assets.json'; +import { parseAssets } from './parse-assets'; + +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 projectSchema = getProjectSchemaFromLocalStorage(scenarioName); + const { componentsMap: componentsMapArray, componentsTree } = projectSchema; + const schema = componentsTree[0]; + const componentsMap: any = {}; + componentsMapArray.forEach((component: any) => { + componentsMap[component.componentName] = component; + }); + + const { components } = await parseAssets(assets); + + setData({ + schema, + components, + }); + } + + const { schema, components } = data; + + if (!schema || !components) { + init(); + return ; + } + + return ( +
+ +
+ ); +}; + +ReactDOM.render(, document.getElementById('ice-container')); diff --git a/demo-lowcode-component/src/services/assets.json b/demo-lowcode-component/src/services/assets.json new file mode 100644 index 0000000..3c48602 --- /dev/null +++ b/demo-lowcode-component/src/services/assets.json @@ -0,0 +1,466 @@ +{ + "components": [ + { + "reference": { + "package": "react-color", + "destructuring": true, + "subName": "", + "main": "lib/index.js", + "exportName": "BlockPicker", + "id": "react-color", + "version": "2.19.3" + }, + "componentId": "2diq52i9ojh0", + "devMode": "procode", + "snippets": [ + { + "schema": { + "componentName": "BlockPicker", + "props": {} + }, + "title": "BlockPicker" + } + ], + "npm": { + "package": "react-color", + "destructuring": true, + "subName": "", + "main": "lib/index.js", + "exportName": "BlockPicker", + "version": "2.19.3" + }, + "experimental": { + "callbacks": {} + }, + "configure": { + "component": { + "isContainer": false, + "isModal": false + }, + "supports": { + "style": false + }, + "props": [ + { + "important": false, + "name": "width", + "type": "field", + "title": "宽度", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "NumberSetter", + "props": { + "placeholder": "请输入" + } + }, + "VariableSetter" + ] + } + }, + "extraProps": { + "display": "inline" + } + } + ] + }, + "componentName": "BlockPicker", + "title": "BlockPicker", + "category": "其他", + "group":"原子组件" + }, + { + "reference": { + "package": "@alilc/lowcode-materials", + "id": "@alilc/lowcode-materials" + }, + "urls": { + "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.6/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.6/build/lowcode/meta.design.js" + }, + "devMode": "procode", + "npm": { + "package": "@alilc/lowcode-materials" + }, + "exportName": "AlilcLowcodeMaterialsMeta", + "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.6/build/lowcode/meta.js" + }, + { + "reference": { + "package": "@alifd/next", + "id": "@alifd/next" + }, + "urls": { + "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.4/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.4/build/lowcode/meta.design.js" + }, + "devMode": "procode", + "npm": { + "package": "@alifd/next" + }, + "exportName": "AlifdNext", + "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.4/build/lowcode/meta.js" + }, + { + "componentId": "LCC-6X91-SW86D1OP80P6HBSW73RL2-KSZSXBBL-2", + "icon": "", + "group": "低代码组件", + "experimental": { + "initials": [ + { + "initial": { + "type": "JSFunction", + "value": "(node) => {\n return `${node.componentName.charAt(0).toLowerCase() + node.componentName.substr(1)}_${Math.random()\n .toString(36)\n .substring(6)}`;\n }" + }, + "name": "fieldId" + } + ], + "callbacks": {} + }, + "configure": { + "component": { + "isContainer": false, + "rootSelector": "", + "isModal": false + }, + "props": [ + { + "name": "content", + "type": "field", + "title": { + "label": "文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "StringSetter", + "initialValue": "", + "props": {} + }, + "VariableSetter" + ] + } + }, + "extraProps": { + "display": "inline" + } + }, + { + "name": "fieldId", + "type": "field", + "title": "唯一标识", + "setter": { + "componentName": "StringSetter", + "props": {} + }, + "extraProps": { + "display": "block" + } + }, + { + "display": "accordion", + "name": "__style__", + "title": "样式设置", + "setter": "StyleSetter" + } + ] + }, + "title": "LCC2", + "tags": "", + "reference": { + "destructuring": false, + "id": "LCC-6X91-SW86D1OP80P6HBSW73RL2-KSZSXBBL-2", + "version": "1.0.0" + }, + "devMode": "lowcode", + "snippets": [ + { + "schema": { + "componentName": "LccLbbxstae", + "props": { + "content": "" + } + }, + "title": "LCC2" + } + ], + "docUrl": "", + "componentName": "LccLbbxstae" + } + ], + "plugins": [], + "extConfig": { + "visionPlugins": [], + "vcComponents": [], + "runtimeUtils": [], + "lowCodeComponentsConfig": { + "LCC-6X91-SW86D1OP80P6HBSW73RL2-KSZSXBBL-2": { + "configId": 46 + } + } + }, + "setters": [], + "sort": { + "categoryList": [], + "groupList": [] + }, + "packages": [ + { + "external": true, + "library": "AliLowCodeEngine", + "package": "@ali/lowcode-engine", + "id": "@ali/lowcode-engine" + }, + { + "external": true, + "library": "Babel", + "package": "babel-standalone", + "id": "babel-standalone" + }, + { + "urls": [ + "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js" + ], + "external": true, + "library": "_", + "package": "lodash", + "id": "lodash" + }, + { + "urls": [ + "https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js" + ], + "external": true, + "library": "moment", + "package": "moment", + "id": "moment" + }, + { + "external": true, + "library": "PropTypes", + "package": "prop-types", + "id": "prop-types" + }, + { + "external": true, + "library": "React", + "package": "react", + "id": "react" + }, + { + "external": true, + "library": "ReactDOM", + "package": "react-dom", + "id": "react-dom" + }, + { + "external": true, + "library": "ReactRouter", + "package": "react-router", + "id": "react-router" + }, + { + "external": true, + "library": "ReactRouterDOM", + "package": "react-router-dom", + "id": "react-router-dom" + }, + { + "urls": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/react-color/2.19.3/main.c346c98.js" + ], + "library": "ReactColor", + "package": "react-color", + "id": "react-color", + "advancedUrls": { + "default": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/react-color/2.19.3/main.c346c98.js" + ] + }, + "version": "2.19.3" + }, + { + "urls": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alife/theme-254/1.25.2/@alilc/lowcode-materials/1.0.6/theme.7c897c2.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alilc/lowcode-materials/1.0.6/main.80e3df4.js" + ], + "library": "AlilcLowcodeMaterials", + "package": "@alilc/lowcode-materials", + "id": "@alilc/lowcode-materials", + "advancedUrls": { + "default": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alife/theme-254/1.25.2/@alilc/lowcode-materials/1.0.6/theme.7c897c2.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alilc/lowcode-materials/1.0.6/main.80e3df4.js" + ] + }, + "version": "1.0.6" + }, + { + "urls": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alife/theme-254/1.25.2/@alifd/next/1.24.18/theme.7c897c2.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alifd/next/1.24.18/main.597cade.js" + ], + "library": "Next", + "package": "@alifd/next", + "id": "@alifd/next", + "advancedUrls": { + "default": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alife/theme-254/1.25.2/@alifd/next/1.24.18/theme.7c897c2.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alifd/next/1.24.18/main.597cade.js" + ] + }, + "version": "1.24.18" + }, + { + "schema": { + "css": ".text_k8e4nalo {\n font-size: 14px;\n color: #666;\n}\n\n.div_k8e4nalp {\n padding: 12px;\n background: #f2f2f2;\n border: 1px solid #ddd;\n}", + "methods": { + "onClick": { + "source": "function onClick() {\n this.setState({\n a: \"文本吧2\"\n });\n}", + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n a: \"文本吧2\"\n });\n}" + } + }, + "defaultProps": {}, + "loopArgs": [ + "item", + "index" + ], + "title": "", + "props": { + "style": { + "mock": {}, + "type": "JSExpression", + "value": "this.props.style" + }, + "className": "component_k8e4naln", + "cls": { + "mock": {}, + "type": "JSExpression", + "value": "this.props.className" + }, + "fieldId": "symbol_k8bnubw4" + }, + "lifeCycles": { + "componentDidUpdate": { + "source": "function componentDidUpdate() {\n console.log('componentDidUpdate');\n}", + "type": "JSFunction", + "value": "function componentDidUpdate() {\n console.log('componentDidUpdate');\n}" + }, + "componentWillUnmount": { + "source": "function componentWillUnmount() {\n console.log('componentWillUnmount');\n}", + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('componentWillUnmount');\n}" + }, + "componentDidCatch": { + "source": "function componentDidCatch() {\n console.log('componentDidCatch');\n}", + "type": "JSFunction", + "value": "function componentDidCatch() {\n console.log('componentDidCatch');\n}" + }, + "componentDidMount": { + "source": "function componentDidMount() {\n console.log('componentDidMount');\n}", + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('componentDidMount');\n}" + } + }, + "condition": true, + "children": [ + { + "condition": true, + "children": [ + { + "condition": true, + "id": "node_ocl9cku8455", + "componentName": "NextText", + "title": "标题", + "props": { + "strong": false, + "code": false, + "children": "欢迎使用低代码组件", + "underline": false, + "style": { + "marginTop": "60px" + }, + "type": "h4", + "delete": false, + "mark": false + } + }, + { + "condition": true, + "id": "node_ocl9mio96k2", + "componentName": "NextText", + "title": "正文", + "props": { + "strong": false, + "code": false, + "children": "物料研发新模式。通过低代码的形式生产组件，极低上手门槛，提供丰富的原子组件用于组合，完善的调试预览和组件生命周期控制。生产的组件既可以在低代码引擎项目中使用，也可以出码后在普通源码项目中使用。", + "underline": false, + "style": { + "marginTop": "12px" + }, + "type": "body1", + "delete": false, + "mark": false + } + }, + { + "condition": true, + "id": "node_oclbbxw39n2", + "componentName": "Calendar", + "title": "卡片型", + "props": { + "shape": "card" + } + } + ], + "id": "node_ocl9cku8453", + "componentName": "Box", + "title": "Box", + "props": { + "spacing": 0, + "justify": "center", + "style": { + "width": "" + }, + "align": "center", + "direction": "column" + } + } + ], + "propTypes": [ + { + "defaultValue": "", + "display": "inline", + "name": "content", + "__sid": "item_l9fexhbc", + "setterProps": {}, + "type": "string", + "title": "文本内容", + "setter": "StringSetter" + } + ], + "id": "node_k8bnubvz", + "state": { + "urlParams": { + "type": "JSExpression", + "value": "this.utils.legaoBuiltin.getUrlParams()" + } + }, + "componentName": "Component", + "dataSource": { + "list": [], + "sync": true + } + }, + "id": "LCC-6X91-SW86D1OP80P6HBSW73RL2-KSZSXBBL-2", + "type": "lowcode", + "version": "1.0.0" + } + ], + "version": "1.1.0" +} \ No newline at end of file diff --git a/demo-lowcode-component/src/services/mockService.ts b/demo-lowcode-component/src/services/mockService.ts new file mode 100644 index 0000000..ff657ad --- /dev/null +++ b/demo-lowcode-component/src/services/mockService.ts @@ -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 { 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((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; + } + + return schema; +}; diff --git a/demo-lowcode-component/src/services/schema.json b/demo-lowcode-component/src/services/schema.json new file mode 100644 index 0000000..96d6820 --- /dev/null +++ b/demo-lowcode-component/src/services/schema.json @@ -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": "" +} \ No newline at end of file diff --git a/demo-lowcode-component/tsconfig.json b/demo-lowcode-component/tsconfig.json new file mode 100644 index 0000000..23314ab --- /dev/null +++ b/demo-lowcode-component/tsconfig.json @@ -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"] +} diff --git a/demo-next-pro/src/services/assets.json b/demo-next-pro/src/services/assets.json index 1d1c31d..9a2be35 100644 --- a/demo-next-pro/src/services/assets.json +++ b/demo-next-pro/src/services/assets.json @@ -1,82 +1,464 @@ { - "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"] - }, - { - "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": "@dogtiti/next-pro-lowcode-materials", - "version": "0.3.0", - "library": "NextProLowcodeMaterials", - "urls": [ - "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/render/default/view.js", - "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/render/default/view.css" - ], - "editUrls": [ - "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/view.js", - "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/view.css" - ], - "advancedUrls": { - "default": [ - "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/render/default/view.js", - "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/render/default/view.css" - ] - }, - "advancedEditUrls": {} - } - ], "components": [ { - "exportName": "DogtitiNextProLowcodeMaterialsMeta", + "reference": { + "package": "react-color", + "destructuring": true, + "subName": "", + "main": "lib/index.js", + "exportName": "BlockPicker", + "id": "react-color", + "version": "2.19.3" + }, + "componentId": "2diq52i9ojh0", + "devMode": "procode", + "snippets": [ + { + "schema": { + "componentName": "BlockPicker", + "props": {} + }, + "title": "BlockPicker" + } + ], "npm": { - "package": "@dogtiti/next-pro-lowcode-materials", - "version": "0.3.0" + "package": "react-color", + "destructuring": true, + "subName": "", + "main": "lib/index.js", + "exportName": "BlockPicker", + "version": "2.19.3" }, - "url": "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/meta.js", - "urls": { - "default": "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/meta.js" + "experimental": { + "callbacks": {} }, - "advancedUrls": { - "default": [ - "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.3.0/build/lowcode/meta.js" + "configure": { + "component": { + "isContainer": false, + "isModal": false + }, + "supports": { + "style": false + }, + "props": [ + { + "important": false, + "name": "width", + "type": "field", + "title": "宽度", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "NumberSetter", + "props": { + "placeholder": "请输入" + } + }, + "VariableSetter" + ] + } + }, + "extraProps": { + "display": "inline" + } + } ] - } + }, + "componentName": "BlockPicker", + "title": "BlockPicker", + "category": "其他" + }, + { + "reference": { + "package": "@alilc/lowcode-materials", + "id": "@alilc/lowcode-materials" + }, + "urls": { + "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/build/lowcode/meta.design.js" + }, + "devMode": "procode", + "npm": { + "package": "@alilc/lowcode-materials" + }, + "exportName": "AlilcLowcodeMaterialsMeta", + "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/build/lowcode/meta.js" + }, + { + "reference": { + "package": "@alifd/next", + "id": "@alifd/next" + }, + "urls": { + "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.4/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.4/build/lowcode/meta.design.js" + }, + "devMode": "procode", + "npm": { + "package": "@alifd/next" + }, + "exportName": "AlifdNext", + "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.4/build/lowcode/meta.js" + }, + { + "componentId": "LCC-6X91-SW86D1OP80P6HBSW73RL2-KSZSXBBL-2", + "icon": "", + "experimental": { + "initials": [ + { + "initial": { + "type": "JSFunction", + "value": "(node) => {\n return `${node.componentName.charAt(0).toLowerCase() + node.componentName.substr(1)}_${Math.random()\n .toString(36)\n .substring(6)}`;\n }" + }, + "name": "fieldId" + } + ], + "callbacks": {} + }, + "configure": { + "component": { + "isContainer": false, + "rootSelector": "", + "isModal": false + }, + "props": [ + { + "name": "content", + "type": "field", + "title": { + "label": "文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "StringSetter", + "initialValue": "", + "props": {} + }, + "VariableSetter" + ] + } + }, + "extraProps": { + "display": "inline" + } + }, + { + "name": "fieldId", + "type": "field", + "title": "唯一标识", + "setter": { + "componentName": "StringSetter", + "props": {} + }, + "extraProps": { + "display": "block" + } + }, + { + "display": "accordion", + "name": "__style__", + "title": "样式设置", + "setter": "StyleSetter" + } + ] + }, + "title": "LCC2", + "tags": "", + "reference": { + "destructuring": false, + "id": "LCC-6X91-SW86D1OP80P6HBSW73RL2-KSZSXBBL-2", + "version": "0.1.0" + }, + "devMode": "lowcode", + "snippets": [ + { + "schema": { + "componentName": "LccLbbxstae", + "props": { + "content": "" + } + }, + "title": "LCC2" + } + ], + "docUrl": "", + "componentName": "LccLbbxstae" } ], - "sort": { - "groupList": ["精选组件", "原子组件"], - "categoryList": [ - "基础元素", - "布局容器类", - "表格类", - "表单详情类", - "帮助类", - "对话框类", - "业务类", - "通用", - "引导", - "信息输入", - "信息展示", - "信息反馈" - ] + "plugins": [], + "extConfig": { + "visionPlugins": [], + "vcComponents": [], + "runtimeUtils": [], + "lowCodeComponentsConfig": { + "LCC-6X91-SW86D1OP80P6HBSW73RL2-KSZSXBBL-2": { + "configId": 45 + } + } }, - "groupList": ["精选组件", "原子组件"], - "ignoreComponents": {} -} + "setters": [], + "sort": { + "categoryList": [], + "groupList": [] + }, + "packages": [ + { + "external": true, + "library": "AliLowCodeEngine", + "package": "@ali/lowcode-engine", + "id": "@ali/lowcode-engine" + }, + { + "external": true, + "library": "Babel", + "package": "babel-standalone", + "id": "babel-standalone" + }, + { + "urls": [ + "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js" + ], + "external": true, + "library": "_", + "package": "lodash", + "id": "lodash" + }, + { + "urls": [ + "https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js" + ], + "external": true, + "library": "moment", + "package": "moment", + "id": "moment" + }, + { + "external": true, + "library": "PropTypes", + "package": "prop-types", + "id": "prop-types" + }, + { + "external": true, + "library": "React", + "package": "react", + "id": "react" + }, + { + "external": true, + "library": "ReactDOM", + "package": "react-dom", + "id": "react-dom" + }, + { + "external": true, + "library": "ReactRouter", + "package": "react-router", + "id": "react-router" + }, + { + "external": true, + "library": "ReactRouterDOM", + "package": "react-router-dom", + "id": "react-router-dom" + }, + { + "urls": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/react-color/2.19.3/main.5f3e005.js" + ], + "library": "ReactColor", + "package": "react-color", + "id": "react-color", + "advancedUrls": { + "default": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/react-color/2.19.3/main.5f3e005.js" + ] + }, + "version": "2.19.3" + }, + { + "urls": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alife/theme-254/1.29.5/@alilc/lowcode-materials/1.0.6/theme.7c897c2.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alilc/lowcode-materials/1.0.6/main.797be82.js" + ], + "library": "AlilcLowcodeMaterials", + "package": "@alilc/lowcode-materials", + "id": "@alilc/lowcode-materials", + "advancedUrls": { + "default": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alife/theme-254/1.29.5/@alilc/lowcode-materials/1.0.6/theme.7c897c2.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alilc/lowcode-materials/1.0.6/main.797be82.js" + ] + }, + "version": "1.0.6" + }, + { + "urls": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alife/theme-254/1.29.5/@alifd/next/1.24.18/theme.7c897c2.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alifd/next/1.24.18/main.7c9b2cb.js" + ], + "library": "Next", + "package": "@alifd/next", + "id": "@alifd/next", + "advancedUrls": { + "default": [ + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alife/theme-254/1.29.5/@alifd/next/1.24.18/theme.7c897c2.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@alifd/next/1.24.18/main.7c9b2cb.js" + ] + }, + "version": "1.24.18" + }, + { + "schema": { + "css": ".text_k8e4nalo {\n font-size: 14px;\n color: #666;\n}\n\n.div_k8e4nalp {\n padding: 12px;\n background: #f2f2f2;\n border: 1px solid #ddd;\n}", + "methods": { + "onClick": { + "source": "function onClick() {\n this.setState({\n a: \"文本吧2\"\n });\n}", + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n a: \"文本吧2\"\n });\n}" + } + }, + "defaultProps": {}, + "loopArgs": [ + "item", + "index" + ], + "title": "", + "props": { + "style": { + "mock": {}, + "type": "JSExpression", + "value": "this.props.style" + }, + "className": "component_k8e4naln", + "cls": { + "mock": {}, + "type": "JSExpression", + "value": "this.props.className" + }, + "fieldId": "symbol_k8bnubw4" + }, + "lifeCycles": { + "componentDidUpdate": { + "source": "function componentDidUpdate() {\n console.log('componentDidUpdate');\n}", + "type": "JSFunction", + "value": "function componentDidUpdate() {\n console.log('componentDidUpdate');\n}" + }, + "componentWillUnmount": { + "source": "function componentWillUnmount() {\n console.log('componentWillUnmount');\n}", + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('componentWillUnmount');\n}" + }, + "componentDidCatch": { + "source": "function componentDidCatch() {\n console.log('componentDidCatch');\n}", + "type": "JSFunction", + "value": "function componentDidCatch() {\n console.log('componentDidCatch');\n}" + }, + "componentDidMount": { + "source": "function componentDidMount() {\n console.log('componentDidMount');\n}", + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('componentDidMount');\n}" + } + }, + "condition": true, + "children": [ + { + "condition": true, + "children": [ + { + "condition": true, + "id": "node_ocl9cku8455", + "componentName": "NextText", + "title": "标题", + "props": { + "strong": false, + "code": false, + "children": "欢迎使用低代码组件", + "underline": false, + "style": { + "marginTop": "60px" + }, + "type": "h4", + "delete": false, + "mark": false + } + }, + { + "condition": true, + "id": "node_ocl9mio96k2", + "componentName": "NextText", + "title": "正文", + "props": { + "strong": false, + "code": false, + "children": "物料研发新模式。通过低代码的形式生产组件，极低上手门槛，提供丰富的原子组件用于组合，完善的调试预览和组件生命周期控制。生产的组件既可以在低代码引擎项目中使用，也可以出码后在普通源码项目中使用。", + "underline": false, + "style": { + "marginTop": "12px" + }, + "type": "body1", + "delete": false, + "mark": false + } + }, + { + "condition": true, + "id": "node_oclbbxw39n2", + "componentName": "Calendar", + "title": "卡片型", + "props": { + "shape": "card" + } + } + ], + "id": "node_ocl9cku8453", + "componentName": "Box", + "title": "Box", + "props": { + "spacing": 0, + "justify": "center", + "style": { + "width": "" + }, + "align": "center", + "direction": "column" + } + } + ], + "propTypes": [ + { + "defaultValue": "", + "display": "inline", + "name": "content", + "__sid": "item_l9fexhbc", + "setterProps": {}, + "type": "string", + "title": "文本内容", + "setter": "StringSetter" + } + ], + "id": "node_k8bnubvz", + "state": { + "urlParams": { + "type": "JSExpression", + "value": "this.utils.legaoBuiltin.getUrlParams()" + } + }, + "componentName": "Component", + "dataSource": { + "list": [], + "sync": true + } + }, + "id": "LCC-6X91-SW86D1OP80P6HBSW73RL2-KSZSXBBL-2", + "type": "lowcode", + "version": "0.1.0" + } + ], + "version": "1.1.0" +} \ No newline at end of file