From 44aa56bd52c3ecc3b88f9b2e5b2283cb0a932fa1 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 27 May 2022 18:47:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=92=99=E5=B1=82?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui-react/package.json                |  1 +
 packages/ui-react/src/button/Button.tsx       |  9 +--
 packages/ui-react/src/button/formConfig.ts    | 12 ++-
 packages/ui-react/src/container/Container.tsx |  9 +--
 packages/ui-react/src/container/formConfig.ts | 13 ++-
 packages/ui-react/src/img/Img.tsx             | 48 +++++++++++
 packages/ui-react/src/img/formConfig.ts       | 28 +++++++
 packages/ui-react/src/img/index.ts            | 24 ++++++
 packages/ui-react/src/img/initValue.ts        | 28 +++++++
 packages/ui-react/src/index.ts                |  6 ++
 packages/ui-react/src/overlay/Overlay.tsx     | 81 +++++++++++++++++++
 packages/ui-react/src/overlay/event.ts        | 22 +++++
 packages/ui-react/src/overlay/formConfig.ts   | 19 +++++
 packages/ui-react/src/overlay/index.ts        | 25 ++++++
 packages/ui-react/src/overlay/initValue.ts    | 11 +++
 packages/ui-react/src/page/formConfig.ts      | 23 +++++-
 packages/ui-react/src/qrcode/Qrcode.tsx       | 53 ++++++++++++
 packages/ui-react/src/qrcode/formConfig.ts    | 24 ++++++
 packages/ui-react/src/qrcode/index.ts         | 24 ++++++
 packages/ui-react/src/qrcode/initValue.ts     | 27 +++++++
 packages/ui-react/src/text/Text.tsx           |  2 +-
 packages/ui-react/src/text/formConfig.ts      | 12 ++-
 packages/ui-react/src/useApp.ts               | 10 +--
 packages/ui-vue2/package.json                 |  6 ++
 packages/ui-vue2/src/Component.vue            |  9 +--
 packages/ui-vue2/src/button/Button.vue        |  3 +
 packages/ui-vue2/src/img/index.ts             | 24 ++++++
 packages/ui-vue2/src/img/src/formConfig.ts    | 28 +++++++
 packages/ui-vue2/src/img/src/index.vue        | 31 +++++++
 packages/ui-vue2/src/img/src/initValue.ts     | 28 +++++++
 packages/ui-vue2/src/index.ts                 |  8 +-
 packages/ui-vue2/src/overlay/index.ts         | 25 ++++++
 packages/ui-vue2/src/overlay/src/event.ts     | 22 +++++
 .../ui-vue2/src/overlay/src/formConfig.ts     |  1 +
 packages/ui-vue2/src/overlay/src/index.vue    | 63 +++++++++++++++
 packages/ui-vue2/src/overlay/src/initValue.ts | 11 +++
 packages/ui-vue2/src/qrcode/index.ts          | 24 ++++++
 packages/ui-vue2/src/qrcode/src/formConfig.ts | 24 ++++++
 packages/ui-vue2/src/qrcode/src/index.vue     | 48 +++++++++++
 packages/ui-vue2/src/qrcode/src/initValue.ts  | 27 +++++++
 packages/ui-vue2/src/text/Text.vue            |  3 +
 packages/ui/package.json                      |  3 +
 packages/ui/src/Component.vue                 |  9 +--
 packages/ui/src/button/src/index.vue          |  2 +
 packages/ui/src/img/src/index.vue             |  3 +
 packages/ui/src/index.ts                      |  2 +
 packages/ui/src/overlay/index.ts              | 25 ++++++
 packages/ui/src/overlay/src/event.ts          | 22 +++++
 packages/ui/src/overlay/src/formConfig.ts     |  1 +
 packages/ui/src/overlay/src/index.vue         | 63 +++++++++++++++
 packages/ui/src/overlay/src/initValue.ts      | 11 +++
 packages/ui/src/qrcode/src/index.vue          |  2 +
 packages/ui/src/text/src/index.vue            |  2 +
 playground/src/pages/Editor.vue               |  5 ++
 runtime/react/package.json                    |  4 +
 runtime/react/src/page/App.css                | 11 ++-
 runtime/react/src/page/main.tsx               |  2 +
 runtime/react/src/playground/main.tsx         |  5 +-
 runtime/vue2/src/page/App.vue                 |  5 ++
 runtime/vue2/src/playground/App.vue           |  4 +
 runtime/vue3/src/page/App.vue                 |  5 ++
 runtime/vue3/src/playground/App.vue           |  4 +
 62 files changed, 1045 insertions(+), 41 deletions(-)
 create mode 100644 packages/ui-react/src/img/Img.tsx
 create mode 100644 packages/ui-react/src/img/formConfig.ts
 create mode 100644 packages/ui-react/src/img/index.ts
 create mode 100644 packages/ui-react/src/img/initValue.ts
 create mode 100644 packages/ui-react/src/overlay/Overlay.tsx
 create mode 100644 packages/ui-react/src/overlay/event.ts
 create mode 100644 packages/ui-react/src/overlay/formConfig.ts
 create mode 100644 packages/ui-react/src/overlay/index.ts
 create mode 100644 packages/ui-react/src/overlay/initValue.ts
 create mode 100644 packages/ui-react/src/qrcode/Qrcode.tsx
 create mode 100644 packages/ui-react/src/qrcode/formConfig.ts
 create mode 100644 packages/ui-react/src/qrcode/index.ts
 create mode 100644 packages/ui-react/src/qrcode/initValue.ts
 create mode 100644 packages/ui-vue2/src/img/index.ts
 create mode 100644 packages/ui-vue2/src/img/src/formConfig.ts
 create mode 100644 packages/ui-vue2/src/img/src/index.vue
 create mode 100644 packages/ui-vue2/src/img/src/initValue.ts
 create mode 100644 packages/ui-vue2/src/overlay/index.ts
 create mode 100644 packages/ui-vue2/src/overlay/src/event.ts
 create mode 100644 packages/ui-vue2/src/overlay/src/formConfig.ts
 create mode 100644 packages/ui-vue2/src/overlay/src/index.vue
 create mode 100644 packages/ui-vue2/src/overlay/src/initValue.ts
 create mode 100644 packages/ui-vue2/src/qrcode/index.ts
 create mode 100644 packages/ui-vue2/src/qrcode/src/formConfig.ts
 create mode 100644 packages/ui-vue2/src/qrcode/src/index.vue
 create mode 100644 packages/ui-vue2/src/qrcode/src/initValue.ts
 create mode 100644 packages/ui/src/overlay/index.ts
 create mode 100644 packages/ui/src/overlay/src/event.ts
 create mode 100644 packages/ui/src/overlay/src/formConfig.ts
 create mode 100644 packages/ui/src/overlay/src/index.vue
 create mode 100644 packages/ui/src/overlay/src/initValue.ts

diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
index 43ac7aeb..c46fc46f 100644
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@tmagic/schema": "^1.0.0-rc.3",
+    "qrcode": "^1.5.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
diff --git a/packages/ui-react/src/button/Button.tsx b/packages/ui-react/src/button/Button.tsx
index 611a1228..57a399a9 100644
--- a/packages/ui-react/src/button/Button.tsx
+++ b/packages/ui-react/src/button/Button.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { MComponent } from '@tmagic/schema';
 
@@ -27,7 +27,7 @@ interface ButtonProps {
 }
 
 const Page: React.FC<ButtonProps> = ({ config }) => {
-  const { app, ref } = useApp({ config });
+  const { app } = useApp({ config });
 
   if (!app) return null;
 
@@ -35,10 +35,9 @@ const Page: React.FC<ButtonProps> = ({ config }) => {
 
   return (
     <button
-      ref={ref}
       className="magic-ui-button"
       style={app.transformStyle(config.style || {})}
-      id={config.id as string}
+      id={`${config.id || ''}`}
     >
       <MagicUiText
         config={{
@@ -49,6 +48,6 @@ const Page: React.FC<ButtonProps> = ({ config }) => {
   );
 };
 
-Page.displayName = 'maigc-ui-button';
+Page.displayName = 'magic-ui-button';
 
 export default Page;
diff --git a/packages/ui-react/src/button/formConfig.ts b/packages/ui-react/src/button/formConfig.ts
index 9a11d765..fed6e928 100644
--- a/packages/ui-react/src/button/formConfig.ts
+++ b/packages/ui-react/src/button/formConfig.ts
@@ -16,4 +16,14 @@
  * limitations under the License.
  */
 
-export default [];
+export default [
+  {
+    name: 'text',
+    text: '文本',
+  },
+  {
+    name: 'multiple',
+    text: '多行文本',
+    type: 'switch',
+  },
+];
diff --git a/packages/ui-react/src/container/Container.tsx b/packages/ui-react/src/container/Container.tsx
index 56670edb..7a446e7d 100644
--- a/packages/ui-react/src/container/Container.tsx
+++ b/packages/ui-react/src/container/Container.tsx
@@ -29,15 +29,14 @@ interface ContainerProps {
   id: string;
 }
 
-const Container: React.FC<ContainerProps> = ({ config }) => {
-  const { app, ref } = useApp({ config });
+const Container: React.FC<ContainerProps> = ({ config, id }) => {
+  const { app } = useApp({ config });
 
   if (!app) return null;
 
   return (
     <div
-      ref={ref}
-      id={`${config.id}`}
+      id={`${id || config.id || ''}`}
       className={`magic-ui-container${config.className ? ` ${config.className}` : ''}`}
       style={app.transformStyle(config.style || {})}
     >
@@ -48,7 +47,7 @@ const Container: React.FC<ContainerProps> = ({ config }) => {
 
         return (
           <MagicUiComp
-            id={`${item.id}`}
+            id={`${item.id || ''}`}
             key={item.id}
             config={item}
             className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
diff --git a/packages/ui-react/src/container/formConfig.ts b/packages/ui-react/src/container/formConfig.ts
index 9a11d765..d9e97a47 100644
--- a/packages/ui-react/src/container/formConfig.ts
+++ b/packages/ui-react/src/container/formConfig.ts
@@ -16,4 +16,15 @@
  * limitations under the License.
  */
 
-export default [];
+export default [
+  {
+    name: 'layout',
+    text: '容器布局',
+    type: 'select',
+    defaultValue: 'absolute',
+    options: [
+      { value: 'absolute', text: '绝对定位' },
+      { value: 'relative', text: '流式布局' },
+    ],
+  },
+];
diff --git a/packages/ui-react/src/img/Img.tsx b/packages/ui-react/src/img/Img.tsx
new file mode 100644
index 00000000..fa132790
--- /dev/null
+++ b/packages/ui-react/src/img/Img.tsx
@@ -0,0 +1,48 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { MComponent } from '@tmagic/schema';
+
+import useApp from '../useApp';
+
+interface ImgProps {
+  config: {
+    url: string;
+    src: string;
+  } & MComponent;
+}
+
+const Img: React.FC<ImgProps> = ({ config }) => {
+  const { app } = useApp({ config });
+
+  if (!app) return null;
+
+  const clickHandler = () => {
+    window.location.href = config.url;
+  }
+
+  return (
+    <img className="magic-ui-img" style={app.transformStyle(config.style || {})} id={`${config.id}`} src={config.src} onClick={clickHandler} />
+  );
+};
+
+Img.displayName = 'magic-ui-img';
+
+export default Img;
diff --git a/packages/ui-react/src/img/formConfig.ts b/packages/ui-react/src/img/formConfig.ts
new file mode 100644
index 00000000..a1650fa6
--- /dev/null
+++ b/packages/ui-react/src/img/formConfig.ts
@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [
+  {
+    text: '图片',
+    name: 'src',
+  },
+  {
+    text: '链接',
+    name: 'url',
+  },
+];
diff --git a/packages/ui-react/src/img/index.ts b/packages/ui-react/src/img/index.ts
new file mode 100644
index 00000000..e8180896
--- /dev/null
+++ b/packages/ui-react/src/img/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Img from './Img';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+
+export default Img;
diff --git a/packages/ui-react/src/img/initValue.ts b/packages/ui-react/src/img/initValue.ts
new file mode 100644
index 00000000..fb523dcc
--- /dev/null
+++ b/packages/ui-react/src/img/initValue.ts
@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+  src: 'https://puui.qpic.cn/vupload/0/1573555382625_bhp0wud8l6w.png/0',
+  url: '',
+  style: {
+    position: 'absolute',
+    left: '57',
+    width: '176',
+    height: '176',
+  },
+};
diff --git a/packages/ui-react/src/index.ts b/packages/ui-react/src/index.ts
index c2b4cac6..414831e5 100644
--- a/packages/ui-react/src/index.ts
+++ b/packages/ui-react/src/index.ts
@@ -18,7 +18,10 @@
 
 import Button from './button';
 import Container from './container';
+import Img from './img';
+import Overlay from './overlay';
 import Page from './page';
+import Qrcode from './qrcode';
 import Text from './text';
 export { default as AppContent } from './AppContent';
 export { default as useApp } from './useApp';
@@ -29,7 +32,10 @@ const ui: Record<string, any> = {
   page: Page,
   container: Container,
   button: Button,
+  img: Img,
   text: Text,
+  qrcode: Qrcode,
+  overlay: Overlay,
 };
 
 export default ui;
diff --git a/packages/ui-react/src/overlay/Overlay.tsx b/packages/ui-react/src/overlay/Overlay.tsx
new file mode 100644
index 00000000..400b4514
--- /dev/null
+++ b/packages/ui-react/src/overlay/Overlay.tsx
@@ -0,0 +1,81 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useContext, useEffect , useState } from 'react';
+
+import Core from '@tmagic/core';
+import { MComponent, MNode } from '@tmagic/schema';
+
+import useApp from '../useApp';
+import AppContent from '../AppContent';
+
+interface OverlayProps {
+  config: MComponent;
+}
+
+const Overlay: React.FC<OverlayProps> = ({ config }) => {
+  const [visible, setVisible] = useState(false);
+
+  const app: Core = useContext(AppContent);
+  const node = app?.page?.getNode(config.id);
+
+  if (!app) return null;
+
+  const openOverlay = () => {
+    setVisible(true);
+    if (app) {
+      app.emit('overlay:open', node);
+    }
+  };
+
+  const closeOverlay = () => {
+    setVisible(false);
+    if (app) {
+      app.emit('overlay:close', node);
+    }
+  };
+
+  useApp({
+    config,
+    methods: {
+      openOverlay,
+      closeOverlay,
+    }
+  });
+
+  app?.on('editor:select', (info: any, path: MNode[]) => {
+    if (path.find((node: MNode) => node.id === config.id)) {
+      openOverlay();
+    } else {
+      closeOverlay();
+    }
+  });
+
+  
+  if (!visible) return null;
+
+  const MagicUiComp = app.resolveComponent('container');
+
+  return (
+    <MagicUiComp id={config.id} className="magic-ui-overlay" config={ { style: config.style, items: config.items } }></MagicUiComp>
+  );
+};
+
+Overlay.displayName = 'magic-ui-overlay';
+
+export default Overlay;
diff --git a/packages/ui-react/src/overlay/event.ts b/packages/ui-react/src/overlay/event.ts
new file mode 100644
index 00000000..8736a9e9
--- /dev/null
+++ b/packages/ui-react/src/overlay/event.ts
@@ -0,0 +1,22 @@
+export default {
+  methods: [
+    {
+      label: '打开蒙层',
+      value: 'openOverlay',
+    },
+    {
+      label: '关闭蒙层',
+      value: 'closeOverlay',
+    },
+  ],
+  events: [
+    {
+      label: '打开蒙层',
+      value: 'overlay:open',
+    },
+    {
+      label: '关闭蒙层',
+      value: 'overlay:close',
+    },
+  ],
+};
diff --git a/packages/ui-react/src/overlay/formConfig.ts b/packages/ui-react/src/overlay/formConfig.ts
new file mode 100644
index 00000000..9a11d765
--- /dev/null
+++ b/packages/ui-react/src/overlay/formConfig.ts
@@ -0,0 +1,19 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [];
diff --git a/packages/ui-react/src/overlay/index.ts b/packages/ui-react/src/overlay/index.ts
new file mode 100644
index 00000000..4c39fbd6
--- /dev/null
+++ b/packages/ui-react/src/overlay/index.ts
@@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import overlay from './Overlay';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+export { default as event } from './event';
+
+export default overlay;
diff --git a/packages/ui-react/src/overlay/initValue.ts b/packages/ui-react/src/overlay/initValue.ts
new file mode 100644
index 00000000..a4c6ffc1
--- /dev/null
+++ b/packages/ui-react/src/overlay/initValue.ts
@@ -0,0 +1,11 @@
+export default {
+  style: {
+    position: 'fixed',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  },
+  items: [],
+};
diff --git a/packages/ui-react/src/page/formConfig.ts b/packages/ui-react/src/page/formConfig.ts
index 9a11d765..54fd0012 100644
--- a/packages/ui-react/src/page/formConfig.ts
+++ b/packages/ui-react/src/page/formConfig.ts
@@ -16,4 +16,25 @@
  * limitations under the License.
  */
 
-export default [];
+export default [
+  {
+    text: '页面标识',
+    name: 'name',
+    disabled: true,
+    extra: '在多页面的情况下用来指定要打开的页面',
+  },
+  {
+    text: '页面标题',
+    name: 'title',
+  },
+  {
+    name: 'layout',
+    text: '容器布局',
+    type: 'select',
+    defaultValue: 'absolute',
+    options: [
+      { value: 'absolute', text: '绝对定位' },
+      { value: 'relative', text: '流式布局' },
+    ],
+  },
+];
diff --git a/packages/ui-react/src/qrcode/Qrcode.tsx b/packages/ui-react/src/qrcode/Qrcode.tsx
new file mode 100644
index 00000000..5b04fe65
--- /dev/null
+++ b/packages/ui-react/src/qrcode/Qrcode.tsx
@@ -0,0 +1,53 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import QRCode from 'qrcode';
+
+import useApp from '../useApp';
+import { MComponent } from '@tmagic/schema';
+
+interface QrcodeProps {
+  config: {
+    url: string;
+  } & MComponent;
+}
+
+const Qrcode: React.FC<QrcodeProps> = ({ config }) => {
+  const { app } = useApp({ config });
+
+  if (!app) return null;
+
+  const [imgSrc, setImgSrc] = useState('');
+
+  useEffect(() => {
+    QRCode.toDataURL(config.url, (e: any, url: string) => {
+      if (e) console.error(e);
+      setImgSrc(url)
+    });
+  }, [config.url])
+
+
+  return (
+    <img className="magic-ui-qrcode" style={app.transformStyle(config.style || {})} id={`${config.id}`} src={imgSrc} />
+  );
+};
+
+Qrcode.displayName = 'magic-ui-qrcode';
+
+export default Qrcode;
diff --git a/packages/ui-react/src/qrcode/formConfig.ts b/packages/ui-react/src/qrcode/formConfig.ts
new file mode 100644
index 00000000..ec02a31a
--- /dev/null
+++ b/packages/ui-react/src/qrcode/formConfig.ts
@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [
+  {
+    text: '链接',
+    name: 'url',
+  },
+];
diff --git a/packages/ui-react/src/qrcode/index.ts b/packages/ui-react/src/qrcode/index.ts
new file mode 100644
index 00000000..7e5ada6f
--- /dev/null
+++ b/packages/ui-react/src/qrcode/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Qrcode from './Qrcode';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+
+export default Qrcode;
diff --git a/packages/ui-react/src/qrcode/initValue.ts b/packages/ui-react/src/qrcode/initValue.ts
new file mode 100644
index 00000000..cacaf4e3
--- /dev/null
+++ b/packages/ui-react/src/qrcode/initValue.ts
@@ -0,0 +1,27 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+  url: 'https://m.film.qq.com',
+  style: {
+    position: 'absolute',
+    left: '57',
+    width: '176',
+    height: '176',
+  },
+};
diff --git a/packages/ui-react/src/text/Text.tsx b/packages/ui-react/src/text/Text.tsx
index a63a2f0f..0086632a 100644
--- a/packages/ui-react/src/text/Text.tsx
+++ b/packages/ui-react/src/text/Text.tsx
@@ -34,7 +34,7 @@ const Text: React.FC<TextProps> = ({ config }) => {
   const [displayText] = useState(config.text);
 
   return (
-    <p ref={ref} className="magic-ui-text" style={app.transformStyle(config.style || {})} id={config.id as string}>
+    <p ref={ref} className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
       {displayText}
     </p>
   );
diff --git a/packages/ui-react/src/text/formConfig.ts b/packages/ui-react/src/text/formConfig.ts
index 9a11d765..fed6e928 100644
--- a/packages/ui-react/src/text/formConfig.ts
+++ b/packages/ui-react/src/text/formConfig.ts
@@ -16,4 +16,14 @@
  * limitations under the License.
  */
 
-export default [];
+export default [
+  {
+    name: 'text',
+    text: '文本',
+  },
+  {
+    name: 'multiple',
+    text: '多行文本',
+    type: 'switch',
+  },
+];
diff --git a/packages/ui-react/src/useApp.ts b/packages/ui-react/src/useApp.ts
index b5605945..3187eb7c 100644
--- a/packages/ui-react/src/useApp.ts
+++ b/packages/ui-react/src/useApp.ts
@@ -16,13 +16,12 @@
  * limitations under the License.
  */
 
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import Core from '@tmagic/core';
 import { MComponent } from '@tmagic/schema';
 
 import AppContent from './AppContent';
-import useCommonMethod from './useCommonMethod';
 
 interface UseAppOptions {
   config: MComponent;
@@ -36,8 +35,6 @@ export default ({ config, methods }: UseAppOptions) => {
   const node = app?.page?.getNode(config.id);
   const [created, setCreated] = useState(false);
 
-  const ref = useRef(null);
-
   if (!created) {
     // 只需要触发一次 created
     setCreated(true);
@@ -45,11 +42,8 @@ export default ({ config, methods }: UseAppOptions) => {
   }
 
   useEffect(() => {
-    const domEl = ref.current;
     const emitData = {
-      ...useCommonMethod(domEl),
       ...methods,
-      $el: domEl,
     };
 
     node?.emit('mounted', emitData);
@@ -59,5 +53,5 @@ export default ({ config, methods }: UseAppOptions) => {
     };
   }, []);
 
-  return { app, ref };
+  return { app };
 };
diff --git a/packages/ui-vue2/package.json b/packages/ui-vue2/package.json
index b0965ec6..458fb456 100644
--- a/packages/ui-vue2/package.json
+++ b/packages/ui-vue2/package.json
@@ -13,6 +13,12 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/schema": "^1.0.0-rc.3",
+    "@vue/composition-api": "1.0.5",
+    "vue": "^2.6.14",
+    "qrcode": "^1.5.0"
+  },
+  "peerDependencies": {
     "@vue/composition-api": "1.0.5",
     "vue": "^2.6.14"
   },
diff --git a/packages/ui-vue2/src/Component.vue b/packages/ui-vue2/src/Component.vue
index 06668fdd..de413638 100644
--- a/packages/ui-vue2/src/Component.vue
+++ b/packages/ui-vue2/src/Component.vue
@@ -10,14 +10,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, PropType, provide } from '@vue/composition-api';
+import { computed, defineComponent, getCurrentInstance, inject, PropType, provide } from '@vue/composition-api';
 
+import Core from '@tmagic/core';
 import { MComponent } from '@tmagic/schema';
 import { toLine } from '@tmagic/utils';
 
-import useApp from './useApp';
-import useCommonMethod from './useCommonMethod';
-
 export default defineComponent({
   name: 'magic-ui-component',
 
@@ -30,7 +28,7 @@ export default defineComponent({
 
   setup(props) {
     const vm = getCurrentInstance()?.proxy;
-    const app = useApp(props);
+    const app: Core | undefined = inject('app');
 
     provide('hoc', vm);
 
@@ -46,7 +44,6 @@ export default defineComponent({
         }
         return displayCfg !== false;
       },
-      ...useCommonMethod(),
     };
   },
 });
diff --git a/packages/ui-vue2/src/button/Button.vue b/packages/ui-vue2/src/button/Button.vue
index 91fdc7cd..8658d7cd 100644
--- a/packages/ui-vue2/src/button/Button.vue
+++ b/packages/ui-vue2/src/button/Button.vue
@@ -10,6 +10,8 @@ import { computed, defineComponent, getCurrentInstance, PropType, reactive } fro
 
 import { MComponent } from '@tmagic/schema';
 
+import useApp from '../useApp';
+
 export default defineComponent({
   name: 'magic-ui-button',
   props: {
@@ -24,6 +26,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    useApp(props);
     const vm = getCurrentInstance()?.proxy;
     const actions = reactive<Function[]>([]);
     const actualActions = computed(() => [
diff --git a/packages/ui-vue2/src/img/index.ts b/packages/ui-vue2/src/img/index.ts
new file mode 100644
index 00000000..3dc08528
--- /dev/null
+++ b/packages/ui-vue2/src/img/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Img from './src/index.vue';
+
+export { default as config } from './src/formConfig';
+export { default as value } from './src/initValue';
+
+export default Img;
diff --git a/packages/ui-vue2/src/img/src/formConfig.ts b/packages/ui-vue2/src/img/src/formConfig.ts
new file mode 100644
index 00000000..a1650fa6
--- /dev/null
+++ b/packages/ui-vue2/src/img/src/formConfig.ts
@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [
+  {
+    text: '图片',
+    name: 'src',
+  },
+  {
+    text: '链接',
+    name: 'url',
+  },
+];
diff --git a/packages/ui-vue2/src/img/src/index.vue b/packages/ui-vue2/src/img/src/index.vue
new file mode 100644
index 00000000..722ff409
--- /dev/null
+++ b/packages/ui-vue2/src/img/src/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <img class="magic-ui-img" :src="config.src" @click="clickHandler" />
+</template>
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+import useApp from '../../useApp';
+
+export default defineComponent({
+  name: 'magic-ui-img',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    useApp(props);
+    return {
+      clickHandler() {
+        window.location.href = props.config.url;
+      },
+    };
+  },
+});
+</script>
diff --git a/packages/ui-vue2/src/img/src/initValue.ts b/packages/ui-vue2/src/img/src/initValue.ts
new file mode 100644
index 00000000..fb523dcc
--- /dev/null
+++ b/packages/ui-vue2/src/img/src/initValue.ts
@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+  src: 'https://puui.qpic.cn/vupload/0/1573555382625_bhp0wud8l6w.png/0',
+  url: '',
+  style: {
+    position: 'absolute',
+    left: '57',
+    width: '176',
+    height: '176',
+  },
+};
diff --git a/packages/ui-vue2/src/index.ts b/packages/ui-vue2/src/index.ts
index 9f05dd74..a056ddd6 100644
--- a/packages/ui-vue2/src/index.ts
+++ b/packages/ui-vue2/src/index.ts
@@ -17,9 +17,11 @@
  */
 
 import Button from './button';
-import Component from './Component.vue';
 import Container from './container';
+import Img from './img';
+import Overlay from './overlay';
 import Page from './page';
+import Qrcode from './qrcode';
 import Text from './text';
 
 const ui: Record<string, any> = {
@@ -27,7 +29,9 @@ const ui: Record<string, any> = {
   container: Container,
   button: Button,
   text: Text,
-  component: Component,
+  img: Img,
+  qrcode: Qrcode,
+  overlay: Overlay,
 };
 
 export default ui;
diff --git a/packages/ui-vue2/src/overlay/index.ts b/packages/ui-vue2/src/overlay/index.ts
new file mode 100644
index 00000000..e4ae98dd
--- /dev/null
+++ b/packages/ui-vue2/src/overlay/index.ts
@@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Overlay from './src/index.vue';
+
+export { default as config } from './src/formConfig';
+export { default as value } from './src/initValue';
+export { default as event } from './src/event';
+
+export default Overlay;
diff --git a/packages/ui-vue2/src/overlay/src/event.ts b/packages/ui-vue2/src/overlay/src/event.ts
new file mode 100644
index 00000000..8736a9e9
--- /dev/null
+++ b/packages/ui-vue2/src/overlay/src/event.ts
@@ -0,0 +1,22 @@
+export default {
+  methods: [
+    {
+      label: '打开蒙层',
+      value: 'openOverlay',
+    },
+    {
+      label: '关闭蒙层',
+      value: 'closeOverlay',
+    },
+  ],
+  events: [
+    {
+      label: '打开蒙层',
+      value: 'overlay:open',
+    },
+    {
+      label: '关闭蒙层',
+      value: 'overlay:close',
+    },
+  ],
+};
diff --git a/packages/ui-vue2/src/overlay/src/formConfig.ts b/packages/ui-vue2/src/overlay/src/formConfig.ts
new file mode 100644
index 00000000..d6d1738d
--- /dev/null
+++ b/packages/ui-vue2/src/overlay/src/formConfig.ts
@@ -0,0 +1 @@
+export default [];
diff --git a/packages/ui-vue2/src/overlay/src/index.vue b/packages/ui-vue2/src/overlay/src/index.vue
new file mode 100644
index 00000000..df118d1b
--- /dev/null
+++ b/packages/ui-vue2/src/overlay/src/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <magic-ui-container v-if="visible" class="magic-ui-overlay" :config="{ items: config.items }">
+    <slot></slot>
+  </magic-ui-container>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+
+import Core from '@tmagic/core';
+import { MNode } from '@tmagic/schema';
+
+import useApp from '../../useApp';
+
+export default defineComponent({
+  name: 'magic-ui-overlay',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(props) {
+    const visible = ref(false);
+    const app: Core | undefined = useApp(props);
+    const node = app?.page?.getNode(props.config.id);
+
+    const openOverlay = () => {
+      visible.value = true;
+      if (app) {
+        app.emit('overlay:open', node);
+      }
+    };
+
+    const closeOverlay = () => {
+      visible.value = false;
+      if (app) {
+        app.emit('overlay:close', node);
+      }
+    };
+
+    app?.on('editor:select', (info, path) => {
+      if (path.find((node: MNode) => node.id === props.config.id)) {
+        openOverlay();
+      } else {
+        closeOverlay();
+      }
+    });
+
+    return {
+      visible,
+
+      openOverlay,
+      closeOverlay,
+    };
+  },
+});
+</script>
diff --git a/packages/ui-vue2/src/overlay/src/initValue.ts b/packages/ui-vue2/src/overlay/src/initValue.ts
new file mode 100644
index 00000000..a4c6ffc1
--- /dev/null
+++ b/packages/ui-vue2/src/overlay/src/initValue.ts
@@ -0,0 +1,11 @@
+export default {
+  style: {
+    position: 'fixed',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  },
+  items: [],
+};
diff --git a/packages/ui-vue2/src/qrcode/index.ts b/packages/ui-vue2/src/qrcode/index.ts
new file mode 100644
index 00000000..20d388c8
--- /dev/null
+++ b/packages/ui-vue2/src/qrcode/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Qrcode from './src/index.vue';
+
+export { default as config } from './src/formConfig';
+export { default as value } from './src/initValue';
+
+export default Qrcode;
diff --git a/packages/ui-vue2/src/qrcode/src/formConfig.ts b/packages/ui-vue2/src/qrcode/src/formConfig.ts
new file mode 100644
index 00000000..ec02a31a
--- /dev/null
+++ b/packages/ui-vue2/src/qrcode/src/formConfig.ts
@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [
+  {
+    text: '链接',
+    name: 'url',
+  },
+];
diff --git a/packages/ui-vue2/src/qrcode/src/index.vue b/packages/ui-vue2/src/qrcode/src/index.vue
new file mode 100644
index 00000000..be414441
--- /dev/null
+++ b/packages/ui-vue2/src/qrcode/src/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <img class="magic-ui-qrcode" :src="imgUrl" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from '@vue/composition-api';
+import QRCode from 'qrcode';
+
+import useApp from '../../useApp';
+
+export default defineComponent({
+  name: 'magic-ui-qrcode',
+
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(props) {
+    useApp(props);
+    const imgUrl = ref();
+
+    watch(
+      () => props.config.url,
+      (url = '') => {
+        QRCode.toDataURL(url, (e: any, url: string) => {
+          if (e) console.error(e);
+          imgUrl.value = url;
+        });
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    return {
+      imgUrl,
+    };
+  },
+});
+</script>
diff --git a/packages/ui-vue2/src/qrcode/src/initValue.ts b/packages/ui-vue2/src/qrcode/src/initValue.ts
new file mode 100644
index 00000000..cacaf4e3
--- /dev/null
+++ b/packages/ui-vue2/src/qrcode/src/initValue.ts
@@ -0,0 +1,27 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+  url: 'https://m.film.qq.com',
+  style: {
+    position: 'absolute',
+    left: '57',
+    width: '176',
+    height: '176',
+  },
+};
diff --git a/packages/ui-vue2/src/text/Text.vue b/packages/ui-vue2/src/text/Text.vue
index b88fbd1a..4272cc2b 100644
--- a/packages/ui-vue2/src/text/Text.vue
+++ b/packages/ui-vue2/src/text/Text.vue
@@ -3,6 +3,8 @@ import { computed, defineComponent, getCurrentInstance, h, inject, PropType } fr
 
 import { MComponent } from '@tmagic/schema';
 
+import useApp from '../useApp';
+
 export default defineComponent({
   name: 'magic-ui-text',
 
@@ -24,6 +26,7 @@ export default defineComponent({
   },
 
   setup(props) {
+    useApp(props);
     const vm = getCurrentInstance()?.proxy;
     const hoc: any = inject('hoc');
     const displayText = computed(() => {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9e6864b6..9c00692e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,6 +17,9 @@
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.0"
   },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
   "devDependencies": {
     "@testing-library/vue": "^6.4.2",
     "@types/qrcode": "^1.4.2",
diff --git a/packages/ui/src/Component.vue b/packages/ui/src/Component.vue
index 0d7cbb25..c3450f56 100644
--- a/packages/ui/src/Component.vue
+++ b/packages/ui/src/Component.vue
@@ -10,13 +10,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, provide } from 'vue';
+import { computed, defineComponent, getCurrentInstance, inject, provide } from 'vue';
 
+import Core from '@tmagic/core';
 import { toLine } from '@tmagic/utils';
 
-import useApp from './useApp';
-import useCommonMethod from './useCommonMethod';
-
 export default defineComponent({
   name: 'magic-ui-component',
 
@@ -29,7 +27,7 @@ export default defineComponent({
 
   setup(props) {
     const vm = getCurrentInstance()?.proxy;
-    const app = useApp(props);
+    const app: Core | undefined = inject('app');
 
     provide('hoc', vm);
 
@@ -45,7 +43,6 @@ export default defineComponent({
         }
         return displayCfg !== false;
       },
-      ...useCommonMethod(props),
     };
   },
 });
diff --git a/packages/ui/src/button/src/index.vue b/packages/ui/src/button/src/index.vue
index e15668c2..411ec2f8 100644
--- a/packages/ui/src/button/src/index.vue
+++ b/packages/ui/src/button/src/index.vue
@@ -9,6 +9,7 @@
 import { computed, defineComponent, getCurrentInstance, PropType, reactive } from 'vue';
 
 import { MButton, MButtonInstance, MText } from '../../../src/types';
+import useApp from '../../useApp';
 
 export default defineComponent({
   name: 'magic-ui-button',
@@ -24,6 +25,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    useApp(props);
     const vm: MButtonInstance = getCurrentInstance()?.proxy as MButtonInstance;
     const actions = reactive<Function[]>([]);
     const actualActions = computed(() => [
diff --git a/packages/ui/src/img/src/index.vue b/packages/ui/src/img/src/index.vue
index 306d55ae..5e948d06 100644
--- a/packages/ui/src/img/src/index.vue
+++ b/packages/ui/src/img/src/index.vue
@@ -5,6 +5,7 @@
 import { defineComponent, PropType } from 'vue';
 
 import { MImg } from '../../types';
+import useApp from '../../useApp';
 
 export default defineComponent({
   name: 'magic-ui-img',
@@ -20,6 +21,8 @@ export default defineComponent({
     },
   },
   setup(props) {
+    useApp(props);
+
     return {
       clickHandler() {
         window.location.href = props.config.url;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 971f9170..a056ddd6 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -19,6 +19,7 @@
 import Button from './button';
 import Container from './container';
 import Img from './img';
+import Overlay from './overlay';
 import Page from './page';
 import Qrcode from './qrcode';
 import Text from './text';
@@ -30,6 +31,7 @@ const ui: Record<string, any> = {
   text: Text,
   img: Img,
   qrcode: Qrcode,
+  overlay: Overlay,
 };
 
 export default ui;
diff --git a/packages/ui/src/overlay/index.ts b/packages/ui/src/overlay/index.ts
new file mode 100644
index 00000000..e4ae98dd
--- /dev/null
+++ b/packages/ui/src/overlay/index.ts
@@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Overlay from './src/index.vue';
+
+export { default as config } from './src/formConfig';
+export { default as value } from './src/initValue';
+export { default as event } from './src/event';
+
+export default Overlay;
diff --git a/packages/ui/src/overlay/src/event.ts b/packages/ui/src/overlay/src/event.ts
new file mode 100644
index 00000000..8736a9e9
--- /dev/null
+++ b/packages/ui/src/overlay/src/event.ts
@@ -0,0 +1,22 @@
+export default {
+  methods: [
+    {
+      label: '打开蒙层',
+      value: 'openOverlay',
+    },
+    {
+      label: '关闭蒙层',
+      value: 'closeOverlay',
+    },
+  ],
+  events: [
+    {
+      label: '打开蒙层',
+      value: 'overlay:open',
+    },
+    {
+      label: '关闭蒙层',
+      value: 'overlay:close',
+    },
+  ],
+};
diff --git a/packages/ui/src/overlay/src/formConfig.ts b/packages/ui/src/overlay/src/formConfig.ts
new file mode 100644
index 00000000..d6d1738d
--- /dev/null
+++ b/packages/ui/src/overlay/src/formConfig.ts
@@ -0,0 +1 @@
+export default [];
diff --git a/packages/ui/src/overlay/src/index.vue b/packages/ui/src/overlay/src/index.vue
new file mode 100644
index 00000000..451316d2
--- /dev/null
+++ b/packages/ui/src/overlay/src/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <magic-ui-container v-if="visible" class="magic-ui-overlay" :config="{ items: config.items }">
+    <slot></slot>
+  </magic-ui-container>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+import Core from '@tmagic/core';
+import { MNode } from '@tmagic/schema';
+
+import useApp from '../../useApp';
+
+export default defineComponent({
+  name: 'magic-ui-overlay',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(props) {
+    const visible = ref(false);
+    const app: Core | undefined = useApp(props);
+    const node = app?.page?.getNode(props.config.id);
+
+    const openOverlay = () => {
+      visible.value = true;
+      if (app) {
+        app.emit('overlay:open', node);
+      }
+    };
+
+    const closeOverlay = () => {
+      visible.value = false;
+      if (app) {
+        app.emit('overlay:close', node);
+      }
+    };
+
+    app?.on('editor:select', (info, path) => {
+      if (path.find((node: MNode) => node.id === props.config.id)) {
+        openOverlay();
+      } else {
+        closeOverlay();
+      }
+    });
+
+    return {
+      visible,
+
+      openOverlay,
+      closeOverlay,
+    };
+  },
+});
+</script>
diff --git a/packages/ui/src/overlay/src/initValue.ts b/packages/ui/src/overlay/src/initValue.ts
new file mode 100644
index 00000000..a4c6ffc1
--- /dev/null
+++ b/packages/ui/src/overlay/src/initValue.ts
@@ -0,0 +1,11 @@
+export default {
+  style: {
+    position: 'fixed',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  },
+  items: [],
+};
diff --git a/packages/ui/src/qrcode/src/index.vue b/packages/ui/src/qrcode/src/index.vue
index d5e27cb5..8e47c5b0 100644
--- a/packages/ui/src/qrcode/src/index.vue
+++ b/packages/ui/src/qrcode/src/index.vue
@@ -7,6 +7,7 @@ import { defineComponent, PropType, ref, watch } from 'vue';
 import QRCode from 'qrcode';
 
 import { MQrcode } from '../../types';
+import useApp from '../../useApp';
 
 export default defineComponent({
   name: 'magic-ui-qrcode',
@@ -24,6 +25,7 @@ export default defineComponent({
   },
 
   setup(props) {
+    useApp(props);
     const imgUrl = ref();
 
     watch(
diff --git a/packages/ui/src/text/src/index.vue b/packages/ui/src/text/src/index.vue
index b912692b..f90c879e 100644
--- a/packages/ui/src/text/src/index.vue
+++ b/packages/ui/src/text/src/index.vue
@@ -2,6 +2,7 @@
 import { computed, defineComponent, getCurrentInstance, h, inject, PropType } from 'vue';
 
 import { MComponentInstance, MText, MTextInstance } from '../../../src/types';
+import useApp from '../../useApp';
 
 export default defineComponent({
   name: 'magic-ui-text',
@@ -22,6 +23,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    useApp(props);
     const vm: MTextInstance = getCurrentInstance()?.proxy as MTextInstance;
     const hoc: MComponentInstance = inject('hoc');
     const displayText = computed(() => {
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 046f8e9f..3d230a8b 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -157,6 +157,11 @@ export default defineComponent({
               text: '组',
               type: 'container',
             },
+            {
+              icon: FolderOpened,
+              text: '蒙层',
+              type: 'overlay',
+            },
           ],
         },
         {
diff --git a/runtime/react/package.json b/runtime/react/package.json
index 986f19c7..58f14bfa 100644
--- a/runtime/react/package.json
+++ b/runtime/react/package.json
@@ -14,6 +14,10 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
   "devDependencies": {
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
diff --git a/runtime/react/src/page/App.css b/runtime/react/src/page/App.css
index 12634385..f321b3dc 100644
--- a/runtime/react/src/page/App.css
+++ b/runtime/react/src/page/App.css
@@ -1,11 +1,16 @@
 html,
 body,
-#app {
+#root {
   width: 100%;
   height: 100%;
 }
 
-#app {
+#root {
   position: relative;
   overflow: auto;
-}
\ No newline at end of file
+}
+
+#root::-webkit-scrollbar {
+  width: 0 !important;
+  display: none;
+}
diff --git a/runtime/react/src/page/main.tsx b/runtime/react/src/page/main.tsx
index eb4f436e..498be722 100644
--- a/runtime/react/src/page/main.tsx
+++ b/runtime/react/src/page/main.tsx
@@ -47,6 +47,8 @@ const getLocalConfig = (): MApp[] => {
   }
 };
 
+window.magicDSL = []
+
 const app = new Core({
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
diff --git a/runtime/react/src/playground/main.tsx b/runtime/react/src/playground/main.tsx
index 3d0aa405..7ef00a27 100644
--- a/runtime/react/src/playground/main.tsx
+++ b/runtime/react/src/playground/main.tsx
@@ -61,7 +61,10 @@ import(componentUrl).then(() => {
   };
 
   const operations = {
-    app,
+    getApp() {
+      return app;
+    },
+
     updateRootConfig(root: MApp) {
       console.log('update root config', root);
       app?.setConfig(root);
diff --git a/runtime/vue2/src/page/App.vue b/runtime/vue2/src/page/App.vue
index d5b10442..0bf012a2 100644
--- a/runtime/vue2/src/page/App.vue
+++ b/runtime/vue2/src/page/App.vue
@@ -33,4 +33,9 @@ body,
   position: relative;
   overflow: auto;
 }
+
+#app::-webkit-scrollbar {
+  width: 0 !important;
+  display: none;
+}
 </style>
diff --git a/runtime/vue2/src/playground/App.vue b/runtime/vue2/src/playground/App.vue
index 7ee48608..02a2e584 100644
--- a/runtime/vue2/src/playground/App.vue
+++ b/runtime/vue2/src/playground/App.vue
@@ -41,6 +41,10 @@ export default defineComponent({
 
     onMounted(() => {
       window.magic?.onRuntimeReady({
+        getApp() {
+          return app;
+        },
+
         updateRootConfig(config: MApp) {
           console.log('update config', config);
           root.value = config;
diff --git a/runtime/vue3/src/page/App.vue b/runtime/vue3/src/page/App.vue
index af020504..012714e2 100644
--- a/runtime/vue3/src/page/App.vue
+++ b/runtime/vue3/src/page/App.vue
@@ -33,4 +33,9 @@ body,
   position: relative;
   overflow: auto;
 }
+
+#app::-webkit-scrollbar {
+  width: 0 !important;
+  display: none;
+}
 </style>
diff --git a/runtime/vue3/src/playground/App.vue b/runtime/vue3/src/playground/App.vue
index 77060ee3..794deefa 100644
--- a/runtime/vue3/src/playground/App.vue
+++ b/runtime/vue3/src/playground/App.vue
@@ -41,6 +41,10 @@ export default defineComponent({
 
     onMounted(() => {
       window.magic?.onRuntimeReady({
+        getApp() {
+          return app;
+        },
+
         updateRootConfig(config: MApp) {
           console.log('update config', config);
           root.value = config;