From f91da661b3359641f288da04d31f90447e30deba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= <armslave.yy@alibaba-inc.com>
Date: Mon, 27 Jul 2020 18:13:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20saveload=20btn=20for=20d?=
 =?UTF-8?q?emo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/demo/src/editor/components.ts        |  2 +
 packages/demo/src/editor/config.js            |  8 +++
 .../demo/src/editor/plugins/saveload.scss     |  4 ++
 packages/demo/src/editor/plugins/saveload.tsx | 68 +++++++++++++++++++
 4 files changed, 82 insertions(+)
 create mode 100644 packages/demo/src/editor/plugins/saveload.scss
 create mode 100644 packages/demo/src/editor/plugins/saveload.tsx

diff --git a/packages/demo/src/editor/components.ts b/packages/demo/src/editor/components.ts
index 6e64a4201..4a9a9382b 100644
--- a/packages/demo/src/editor/components.ts
+++ b/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,
 };
diff --git a/packages/demo/src/editor/config.js b/packages/demo/src/editor/config.js
index ebf7be410..f950c31ae 100644
--- a/packages/demo/src/editor/config.js
+++ b/packages/demo/src/editor/config.js
@@ -45,6 +45,14 @@ export default {
           width: 64,
         },
       },
+      {
+        pluginKey: 'saveload',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 128,
+        },
+      },
     ],
     leftArea: [
       {
diff --git a/packages/demo/src/editor/plugins/saveload.scss b/packages/demo/src/editor/plugins/saveload.scss
new file mode 100644
index 000000000..1882d1f91
--- /dev/null
+++ b/packages/demo/src/editor/plugins/saveload.scss
@@ -0,0 +1,4 @@
+.lowcode-plugin-saveload {
+  padding: 10px 4px;
+  display: inline-block;
+}
diff --git a/packages/demo/src/editor/plugins/saveload.tsx b/packages/demo/src/editor/plugins/saveload.tsx
new file mode 100644
index 000000000..fc7ba6acd
--- /dev/null
+++ b/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;