feat: 新增蒙层组件

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"
   },

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;

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',
+  },
+];

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}` : ''}`}

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: '流式布局' },
+    ],
+  },
+];

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;

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',
+  },
+];

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;

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',
+  },
+};

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;

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;

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',
+    },
+  ],
+};

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 [];

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;

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: [],
+};

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: '流式布局' },
+    ],
+  },
+];

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;

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',
+  },
+];

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;

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',
+  },
+};

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>
   );

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',
+  },
+];

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 };
 };

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"
   },

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(),
     };
   },
 });

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(() => [

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;

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',
+  },
+];

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>

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',
+  },
+};

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;

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;

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',
+    },
+  ],
+};

packages/ui-vue2/src/overlay/src/formConfig.ts

@@ -0,0 +1 @@
+export default [];

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>

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: [],
+};

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;

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',
+  },
+];

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>

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',
+  },
+};

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(() => {

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",

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),
     };
   },
 });

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(() => [

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;

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;

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;

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',
+    },
+  ],
+};

packages/ui/src/overlay/src/formConfig.ts

@@ -0,0 +1 @@
+export default [];

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>

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: [],
+};

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(

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(() => {

playground/src/pages/Editor.vue

@@ -157,6 +157,11 @@ export default defineComponent({
               text: '组',
               type: 'container',
             },
+            {
+              icon: FolderOpened,
+              text: '蒙层',
+              type: 'overlay',
+            },
           ],
         },
         {

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",

runtime/react/src/page/App.css

@@ -1,11 +1,16 @@
 html,
 body,
-#app {
+#root {
   width: 100%;
   height: 100%;
 }
 
-#app {
+#root {
   position: relative;
   overflow: auto;
-}
+}
+
+#root::-webkit-scrollbar {
+  width: 0 !important;
+  display: none;
+}

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'),

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);

runtime/vue2/src/page/App.vue

@@ -33,4 +33,9 @@ body,
   position: relative;
   overflow: auto;
 }
+
+#app::-webkit-scrollbar {
+  width: 0 !important;
+  display: none;
+}
 </style>

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;

runtime/vue3/src/page/App.vue

@@ -33,4 +33,9 @@ body,
   position: relative;
   overflow: auto;
 }
+
+#app::-webkit-scrollbar {
+  width: 0 !important;
+  display: none;
+}
 </style>

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;