feat: add lowcode-component demo

2023-01-09 12:09:55 +08:00 · 2023-01-09 12:09:55 +08:00 · a625469ffb
parent ca4ac6e44e
commit a625469ffb
35 changed files with 2276 additions and 73 deletions
--- 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": {
--- a/demo-lowcode-component/.prettierrc.js
+++ b/demo-lowcode-component/.prettierrc.js
@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};
--- a/demo-lowcode-component/build.json
+++ 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"
+  ]
+}
--- a/demo-lowcode-component/build.plugin.js
+++ 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');
+  });
+};
--- a/demo-lowcode-component/package.json
+++ 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"
+  }
+}
--- a/demo-lowcode-component/public/favicon.png
+++ b/demo-lowcode-component/public/favicon.png
--- a/demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/meta.js
+++ b/demo-lowcode-component/public/fixtures/basic-fusion-with-single-component/meta.js
--- 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
--- 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
@ -0,0 +1 @@
+!function e(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.M220318=n():t.M220318=n()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function t(){return e.default}:function t(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=345)}({3:function(e,t){e.exports=window.React},345:function(e,t,n){e.exports=n(429)},346:function(e,t,n){},429:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));var r={};n.r(r),n.d(r,"default",(function(){return l}));var o=n(3),u=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n},f=function e(t,n){var r=t.title,f=t.content,i=u(t,["title","content"]);return o.createElement("div",Object.assign({ref:n,className:"ExampleComponent"},i),o.createElement("h1",null,r),f||"Hello ExampleComponent")},i=Object(o.forwardRef)(f);i.displayName="ExampleComponent";var l=i,c=n(346),a={},p="M220318",d=!0;function s(e,t){return e.default?e.default:e[t]?e[t]:e}}})}));
--- a/demo-lowcode-component/public/index.ejs
+++ b/demo-lowcode-component/public/index.ejs
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>阿里低代码引擎 Demo</title>
+    <link rel="icon" href="//img.alicdn.com/imgextra/i2/O1CN01lNWGJi1xflgRfSgbk_!!6000000006471-55-tps-22-26.svg">
+    <link href="./css/index.css" rel="stylesheet" />
+    <!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
+    <link href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css" rel="stylesheet" />
+    <link href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css" rel="stylesheet" />
+    <!-- 低代码引擎的页面框架样式 -->
+    <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.18-beta.5/dist/css/engine-core.css" />
+    <!-- 低代码引擎官方扩展的样式 -->
+    <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/css/engine-ext.css" />
+
+    <!-- React，可替换为 production 包 -->
+    <script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
+    <!-- React DOM，可替换为 production 包 -->
+    <script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
+    <!-- React 向下兼容，预防物料层的依赖 -->
+    <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
+    <script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
+    <!-- lodash，低代码编辑器的依赖 -->
+    <script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
+    <!-- 日期处理包，Fusion Next 的依赖 -->
+    <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
+    <!-- Fusion Next 的主包，低代码编辑器的依赖 -->
+    <script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
+    <!-- 低代码引擎的主包 -->
+    <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.1.0-beta.9/dist/js/engine-core.js"></script>
+    <!-- 低代码引擎官方扩展的主包 -->
+    <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/js/engine-ext.js"></script>
+    <script>
+      console.log(
+        '%c AliLowCodeEngineDemo %c v<%= version %> ',
+        'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #b37feb; font-weight: bold;',
+        'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;',
+      );
+    </script>
+  </head>
+
+  <body>
+    <div id="lce-container"></div>
+    <script type="text/javascript" src="./js/index.js"></script>
+  </body>
+</html>
--- a/demo-lowcode-component/public/index.html
+++ b/demo-lowcode-component/public/index.html
@ -0,0 +1 @@
+勿删，删了有奇妙的 bug😄~
--- a/demo-lowcode-component/public/mock-pages.json
+++ 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}]}
--- a/demo-lowcode-component/public/mock/info.json
+++ b/demo-lowcode-component/public/mock/info.json
@ -0,0 +1,3 @@
+{
+  "info": "Hello AliLowCode!!"
+}
--- a/demo-lowcode-component/public/preview.html
+++ b/demo-lowcode-component/public/preview.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>阿里低代码引擎 Demo - 预览页</title>
+  <link href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css" rel="stylesheet">
+  <link href="./css/preview.css" rel="stylesheet">
+</head>
+<body>
+<div id="ice-container"></div>
+<script>
+  window.g_config = {
+    locale: 'zh-CN',
+  };
+</script>
+<script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
+<script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
+<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
+<script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js"></script>
+<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
+<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
+<script type="text/javascript" src="./js/preview.js"></script>
+</body>
+</html>
--- a/demo-lowcode-component/scripts/watchdog.js
+++ 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`);
+  }
+});
--- a/demo-lowcode-component/src/global.scss
+++ 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;
+}
--- a/demo-lowcode-component/src/index.ts
+++ 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()
+    },
+  });
+})();
--- a/demo-lowcode-component/src/parse-assets.ts
+++ 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 }
+  }
+}
--- a/demo-lowcode-component/src/plugins/plugin-component-panel/index.tsx
+++ 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;
--- a/demo-lowcode-component/src/plugins/plugin-custom-setter-sample/index.tsx
+++ 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;
--- 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
@ -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;
--- 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
@ -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;
--- a/demo-lowcode-component/src/plugins/plugin-default-setters-registry/index.tsx
+++ 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;
--- a/demo-lowcode-component/src/plugins/plugin-editor-init/index.tsx
+++ 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;
--- 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
@ -0,0 +1,170 @@
+import { ILowCodePluginContext } from '@alilc/lowcode-engine';
+import { Button } from '@alifd/next';
+import { material } from '@alilc/lowcode-engine';
+import { Message } from '@alifd/next';
+
+const loadIncrementalAssets = () => {
+  material?.onChangeAssets(() => {
+    Message.success('[MCBreadcrumb] 物料加载成功');
+  });
+
+  material.loadIncrementalAssets({
+    packages: [
+      {
+        title: 'MCBreadcrumb',
+        package: 'mc-breadcrumb',
+        version: '1.0.0',
+        urls: [
+          'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js',
+          'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css',
+        ],
+        library: 'MCBreadcrumb',
+      },
+    ],
+    components: [
+      {
+        componentName: 'MCBreadcrumb',
+        title: 'MCBreadcrumb',
+        docUrl: '',
+        screenshot: '',
+        npm: {
+          package: 'mc-breadcrumb',
+          version: '1.0.0',
+          exportName: 'MCBreadcrumb',
+          main: 'lib/index.js',
+          destructuring: false,
+          subName: '',
+        },
+        props: [
+          {
+            name: 'prefix',
+            propType: 'string',
+            description: '样式类名的品牌前缀',
+            defaultValue: 'next-',
+          },
+          {
+            name: 'title',
+            propType: 'string',
+            description: '标题',
+            defaultValue: 'next-',
+          },
+          {
+            name: 'rtl',
+            propType: 'bool',
+          },
+          {
+            name: 'children',
+            propType: {
+              type: 'instanceOf',
+              value: 'node',
+            },
+            description: '面包屑子节点，需传入 Breadcrumb.Item',
+          },
+          {
+            name: 'maxNode',
+            propType: {
+              type: 'oneOfType',
+              value: [
+                'number',
+                {
+                  type: 'oneOf',
+                  value: ['auto'],
+                },
+              ],
+            },
+            description:
+              '面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。',
+            defaultValue: 100,
+          },
+          {
+            name: 'separator',
+            propType: {
+              type: 'instanceOf',
+              value: 'node',
+            },
+            description: '分隔符，可以是文本或 Icon',
+          },
+          {
+            name: 'component',
+            propType: {
+              type: 'oneOfType',
+              value: ['string', 'func'],
+            },
+            description: '设置标签类型',
+            defaultValue: 'nav',
+          },
+          {
+            name: 'className',
+            propType: 'any',
+          },
+          {
+            name: 'style',
+            propType: 'object',
+          },
+        ],
+        configure: {
+          component: {
+            isContainer: true,
+            isModel: true,
+            rootSelector: 'div.MCBreadcrumb',
+          },
+        },
+      },
+    ],
+
+    componentList: [
+      {
+        title: '常用',
+        icon: '',
+        children: [
+          {
+            componentName: 'MCBreadcrumb',
+            title: 'MC面包屑',
+            icon: '',
+            package: 'mc-breadcrumb',
+            library: 'MCBreadcrumb',
+            snippets: [
+              {
+                title: 'MC面包屑',
+                screenshot:
+                  'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png',
+                schema: {
+                  componentName: 'MCBreadcrumb',
+                  props: {
+                    title: '物料中心',
+                    prefix: 'next-',
+                    maxNode: 100,
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  });
+};
+const LoadIncrementalAssetsWidgetPlugin = (ctx: ILowCodePluginContext) => {
+  return {
+    async init() {
+      const { skeleton } = ctx;
+
+      skeleton.add({
+        name: 'loadAssetsSample',
+        area: 'topArea',
+        type: 'Widget',
+        props: {
+          align: 'right',
+          width: 80,
+        },
+        content: (
+          <Button onClick={loadIncrementalAssets}>
+            异步加载资源
+          </Button>
+        ),
+      });
+    },
+  };
+}
+LoadIncrementalAssetsWidgetPlugin.pluginName = 'LoadIncrementalAssetsWidgetPlugin';
+export default LoadIncrementalAssetsWidgetPlugin;
--- a/demo-lowcode-component/src/plugins/plugin-logo-sample/index.scss
+++ 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;
+  }
+}
--- a/demo-lowcode-component/src/plugins/plugin-logo-sample/index.tsx
+++ 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<IProps> = (props): React.ReactElement => {
+  const { scenarioDisplayName, scenarioInfo } = props;
+  const urls = scenarioInfo?.urls || [];
+  return (
+    <div className="lowcode-plugin-logo">
+      <a className="logo" target="blank" href={props.href || 'https://lowcode-engine.cn'} style={{ backgroundImage: `url(${props.logo})` }} />
+      <div className="scenario-name">{scenarioDisplayName}</div>
+      {
+      urls && (
+        <Dropdown
+          className="info-dropdown"
+          trigger={(
+            <img
+              style={{
+                height: '18px',
+                position: 'relative',
+                top: '-2px',
+              }}
+              src="https://img.alicdn.com/imgextra/i4/O1CN013upU1R1yl5wVezP8k_!!6000000006618-2-tps-512-512.png"
+            />
+          )}
+          triggerType="click"
+        >
+          <Menu onItemClick={(key, item) => window.open(key, '_blank')}>
+            {
+              urls.map((url: any) => <Menu.Item key={url.value}>{url.key}</Menu.Item>)
+            }
+          </Menu>
+        </Dropdown>
+      )
+    }
+    </div>
+  );
+};
+// 示例 Logo widget
+const LogoSamplePlugin = (ctx: ILowCodePluginContext) => {
+  return {
+    async init() {
+      const { skeleton, config } = ctx;
+      const scenarioDisplayName = config.get('scenarioDisplayName');
+      const scenarioInfo = config.get('scenarioInfo');
+      // 注册 logo widget
+      skeleton.add({
+        area: 'topArea',
+        type: 'Widget',
+        name: 'logo',
+        content: <Logo scenarioDisplayName={scenarioDisplayName} scenarioInfo={scenarioInfo}  />,
+        contentProps: {
+          logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg',
+          href: 'https://lowcode-engine.cn',
+        },
+        props: {
+          align: 'left',
+        },
+      });
+    },
+  };
+}
+LogoSamplePlugin.pluginName = 'LogoSamplePlugin';
+LogoSamplePlugin.meta = {
+  dependencies: ['EditorInitPlugin'],
+};
+export default LogoSamplePlugin;
--- a/demo-lowcode-component/src/plugins/plugin-preview-sample/index.tsx
+++ 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: (
+          <Button type="primary" onClick={() => doPreview()}>
+            预览
+          </Button>
+        ),
+      });
+    },
+  };
+}
+PreviewSamplePlugin.pluginName = 'PreviewSamplePlugin';
+PreviewSamplePlugin.meta = {
+  dependencies: ['EditorInitPlugin'],
+};
+export default PreviewSamplePlugin;
--- a/demo-lowcode-component/src/plugins/plugin-save-sample/index.tsx
+++ 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: (
+          <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;
--- a/demo-lowcode-component/src/preview.tsx
+++ 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 <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'));
--- a/demo-lowcode-component/src/services/assets.json
+++ 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"
+}
--- a/demo-lowcode-component/src/services/mockService.ts
+++ 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<void>((resolve, reject) => {
+      Dialog.confirm({
+        content: '确定要重置吗？您所有的修改都将消失！',
+        onOk: () => {
+          resolve();
+        },
+        onCancel: () => {
+          reject()
+        },
+      })
+    })
+  } catch(err) {
+    return;
+  }
+
+  let defaultSchema = schema || {
+    componentsTree: [{ componentName: 'Page', fileName: 'sample' }],
+    componentsMap: material.componentsMap,
+    version: '1.0.0',
+    i18n: {},
+  };
+
+  project.getCurrentDocument()?.importSchema(defaultSchema as any);
+  project.simulatorHost?.rerender();
+
+  setProjectSchemaToLocalStorage(scenarioName);
+  await setPackgesToLocalStorage(scenarioName);
+  Message.success('成功重置页面');
+}
+
+const getLSName = (scenarioName: string, ns: string = 'projectSchema') => `${scenarioName}:${ns}`;
+
+export const getProjectSchemaFromLocalStorage = (scenarioName: string) => {
+  if (!scenarioName) {
+    console.error('scenarioName is required!');
+    return;
+  }
+  return JSON.parse(window.localStorage.getItem(getLSName(scenarioName)) || '{}');
+}
+
+const setProjectSchemaToLocalStorage = (scenarioName: string) => {
+  if (!scenarioName) {
+    console.error('scenarioName is required!');
+    return;
+  }
+  window.localStorage.setItem(
+    getLSName(scenarioName),
+    JSON.stringify(project.exportSchema(TransformStage.Save))
+  );
+}
+
+const setPackgesToLocalStorage = async (scenarioName: string) => {
+  if (!scenarioName) {
+    console.error('scenarioName is required!');
+    return;
+  }
+  const packages = await filterPackages(material.getAssets().packages);
+  window.localStorage.setItem(
+    getLSName(scenarioName, 'packages'),
+    JSON.stringify(packages),
+  );
+}
+
+export const getPackagesFromLocalStorage = (scenarioName: string) => {
+  if (!scenarioName) {
+    console.error('scenarioName is required!');
+    return;
+  }
+  return JSON.parse(window.localStorage.getItem(getLSName(scenarioName, 'packages')) || '{}');
+}
+
+export const getPageSchema = async (scenarioName: string = 'unknown') => {
+  const pageSchema = getProjectSchemaFromLocalStorage(scenarioName).componentsTree?.[0];
+
+  if (pageSchema) {
+    return pageSchema;
+  }
+
+  return schema;
+};
--- a/demo-lowcode-component/src/services/schema.json
+++ 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": ""
+}
--- a/demo-lowcode-component/tsconfig.json
+++ 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"]
+}
--- 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"
+}
				`@ -0,0 +1 @@`
				!function e(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.M220318=n():t.M220318=n()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function t(){return e.default}:function t(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=345)}({3:function(e,t){e.exports=window.React},345:function(e,t,n){e.exports=n(429)},346:function(e,t,n){},429:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));var r={};n.r(r),n.d(r,"default",(function(){return l}));var o=n(3),u=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n},f=function e(t,n){var r=t.title,f=t.content,i=u(t,["title","content"]);return o.createElement("div",Object.assign({ref:n,className:"ExampleComponent"},i),o.createElement("h1",null,r),f\|\|"Hello ExampleComponent")},i=Object(o.forwardRef)(f);i.displayName="ExampleComponent";var l=i,c=n(346),a={},p="M220318",d=!0;function s(e,t){return e.default?e.default:e[t]?e[t]:e}}})}));
				`@ -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}]}`