feat: 🎸 saveload btn for demo

packages/demo/src/editor/components.ts

@@ -9,6 +9,7 @@ import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
 import sourceEditor from '@ali/lowcode-plugin-source-editor';
 
 import codeout from './plugins/codeout';
+import saveload from './plugins/saveload';
 
 export default {
   logo,
@@ -21,4 +22,5 @@ export default {
   variableBindDialog,
   sourceEditor,
   codeout,
+  saveload,
 };

packages/demo/src/editor/config.js

@@ -45,6 +45,14 @@ export default {
           width: 64,
         },
       },
+      {
+        pluginKey: 'saveload',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 128,
+        },
+      },
     ],
     leftArea: [
       {

packages/demo/src/editor/plugins/saveload.scss

@@ -0,0 +1,4 @@
+.lowcode-plugin-saveload {
+  padding: 10px 4px;
+  display: inline-block;
+}

packages/demo/src/editor/plugins/saveload.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import React from 'react';
+import { Button } from '@alifd/next';
+import { PluginProps, NpmInfo } from '@ali/lowcode-types';
+import { Designer } from '@ali/lowcode-designer';
+
+import './saveload.scss';
+
+interface BasicSection {
+  componentName: string;
+  title: string;
+  description?: string;
+  docUrl?: string;
+  screenshot?: string;
+  icon?: string;
+  tags?: string[];
+  devMode?: 'proCode' | 'lowCode';
+  npm: NpmInfo;
+  [k: string]: any;
+}
+
+const Codeout = ({ editor }: PluginProps) => {
+  const handleSaveClick = () => {
+    const designer = editor.get(Designer);
+    if (designer) {
+      const schema = designer.schema.componentsTree[0]; // editor.get('schema');
+      const schemaStr = JSON.stringify(schema);
+      window.localStorage.setItem('schema_data', schemaStr);
+      console.info('save schema:', schemaStr);
+      alert('保存成功');
+    }
+  };
+
+  const handleLoadClick = () => {
+    const designer = editor.get(Designer);
+    if (designer) {
+      const tmp = window.localStorage.getItem('schema_data');
+      if (tmp) {
+        try {
+          const schema = JSON.parse(tmp);
+          editor.set('schema', schema);
+          console.info('load schema:', schema);
+          alert('加载成功');
+        } catch (error) {
+          console.log('Invalid Schema', error);
+        }
+      }
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <div className="lowcode-plugin-saveload">
+        <Button type="primary" onClick={handleSaveClick}>
+          保存
+        </Button>
+      </div>
+      <div className="lowcode-plugin-saveload">
+        <Button type="primary" onClick={handleLoadClick}>
+          加载
+        </Button>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default Codeout;