feat(ui): 添加二维码，图片组件

package-lock.json

@@ -4329,6 +4329,14 @@
 			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
 			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
 		},
+		"@types/qrcode": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.4.2.tgz",
+			"integrity": "sha512-7uNT9L4WQTNJejHTSTdaJhfBSCN73xtXaHFyBJ8TSwiLhe4PRuTue7Iph0s2nG9R/ifUaSnGhLUOZavlBEqDWQ==",
+			"requires": {
+				"@types/node": "*"
+			}
+		},
 		"@types/react": {
 			"version": "17.0.44",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
@@ -6979,8 +6987,7 @@
 		"decamelize": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-			"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+			"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
-			"dev": true
 		},
 		"decamelize-keys": {
 			"version": "1.1.0",
@@ -7109,6 +7116,11 @@
 			"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
 			"dev": true
 		},
+		"dijkstrajs": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
+			"integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
+		},
 		"dir-glob": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -7234,6 +7246,11 @@
 			"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
 			"dev": true
 		},
+		"encode-utf8": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
+			"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+		},
 		"encoding": {
 			"version": "0.1.13",
 			"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
@@ -12450,6 +12467,11 @@
 				"semver-compare": "^1.0.0"
 			}
 		},
+		"pngjs": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+			"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+		},
 		"postcss": {
 			"version": "8.4.12",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
@@ -12602,6 +12624,76 @@
 			"integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
 			"dev": true
 		},
+		"qrcode": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.0.tgz",
+			"integrity": "sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ==",
+			"requires": {
+				"dijkstrajs": "^1.0.1",
+				"encode-utf8": "^1.0.3",
+				"pngjs": "^5.0.0",
+				"yargs": "^15.3.1"
+			},
+			"dependencies": {
+				"camelcase": {
+					"version": "5.3.1",
+					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+				},
+				"cliui": {
+					"version": "6.0.0",
+					"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+					"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+					"requires": {
+						"string-width": "^4.2.0",
+						"strip-ansi": "^6.0.0",
+						"wrap-ansi": "^6.2.0"
+					}
+				},
+				"wrap-ansi": {
+					"version": "6.2.0",
+					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+					"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+					"requires": {
+						"ansi-styles": "^4.0.0",
+						"string-width": "^4.1.0",
+						"strip-ansi": "^6.0.0"
+					}
+				},
+				"y18n": {
+					"version": "4.0.3",
+					"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+					"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+				},
+				"yargs": {
+					"version": "15.4.1",
+					"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+					"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+					"requires": {
+						"cliui": "^6.0.0",
+						"decamelize": "^1.2.0",
+						"find-up": "^4.1.0",
+						"get-caller-file": "^2.0.1",
+						"require-directory": "^2.1.1",
+						"require-main-filename": "^2.0.0",
+						"set-blocking": "^2.0.0",
+						"string-width": "^4.2.0",
+						"which-module": "^2.0.0",
+						"y18n": "^4.0.0",
+						"yargs-parser": "^18.1.2"
+					}
+				},
+				"yargs-parser": {
+					"version": "18.1.3",
+					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+					"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+					"requires": {
+						"camelcase": "^5.0.0",
+						"decamelize": "^1.2.0"
+					}
+				}
+			}
+		},
 		"qs": {
 			"version": "6.5.3",
 			"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
@@ -13084,6 +13176,11 @@
 			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
 			"dev": true
 		},
+		"require-main-filename": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+		},
 		"resolve": {
 			"version": "1.22.0",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -13310,8 +13407,7 @@
 		"set-blocking": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-			"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+			"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
-			"dev": true
 		},
 		"setimmediate": {
 			"version": "1.0.5",
@@ -14833,6 +14929,11 @@
 				"is-symbol": "^1.0.3"
 			}
 		},
+		"which-module": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+			"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+		},
 		"wide-align": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",

packages/ui/package.json

@@ -13,11 +13,13 @@
   "dependencies": {
     "@tmagic/schema": "^1.0.0-rc.2",
     "delegate": "^3.2.0",
+    "qrcode": "^1.5.0",
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.0"
   },
   "devDependencies": {
     "@testing-library/vue": "^6.4.2",
+    "@types/qrcode": "^1.4.2",
     "@vue/compiler-sfc": "^3.2.0",
     "@vue/test-utils": "^2.0.0-rc.12"
   }

packages/ui/src/container/src/Container.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="display()"
-    :id="config.id"
+    :id="`${config.id || ''}`"
     :class="`magic-ui-container${config.className ? ` ${config.className}` : ''}`"
     :style="style"
   >

packages/ui/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/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/src/img/src/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <img class="magic-ui-img" :src="config.src" @click="clickHandler" />
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { MImg } from '../../types';
+
+export default defineComponent({
+  name: 'magic-ui-img',
+  props: {
+    config: {
+      type: Object as PropType<MImg>,
+      default: () => ({}),
+    },
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    return {
+      clickHandler() {
+        window.location.href = props.config.url;
+      },
+    };
+  },
+});
+</script>

packages/ui/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/src/index.ts

@@ -18,7 +18,9 @@
 
 import Button from './button';
 import Container from './container';
+import Img from './img';
 import Page from './page';
+import Qrcode from './qrcode';
 import Text from './text';
 
 const ui: Record<string, any> = {
@@ -26,6 +28,8 @@ const ui: Record<string, any> = {
   container: Container,
   button: Button,
   text: Text,
+  img: Img,
+  qrcode: Qrcode,
 };
 
 export default ui;

packages/ui/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/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/src/qrcode/src/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <img class="magic-ui-qrcode" :src="imgUrl" />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watch } from 'vue';
+import QRCode from 'qrcode';
+
+import { MQrcode } from '../../types';
+
+export default defineComponent({
+  name: 'magic-ui-qrcode',
+
+  props: {
+    config: {
+      type: Object as PropType<MQrcode>,
+      default: () => ({}),
+    },
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(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/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/src/types.ts

@@ -230,3 +230,18 @@ export type MButtonInstance =
   | undefined;
 
 export type ArrayOneOrMore = { 0: string } & string[];
+
+export interface MImg {
+  src: string;
+  url: string;
+}
+
+export interface MQrcode {
+  url: string;
+}
+
+export interface MPop extends MComponent {
+  items?: MComponent[] | MContainer[];
+  closeButtonStyle?: any;
+  closeButton?: boolean;
+}

playground/src/pages/Editor.vue

@@ -11,6 +11,7 @@
       :component-group-list="componentGroupList"
       :default-selected="defaultSelected"
       :moveable-options="moveableOptions"
+      :auto-scroll-into-view="true"
     ></m-editor>
 
     <el-dialog v-model="previewVisible" destroy-on-close :width="375" custom-class="pre-viewer" title="预览">
@@ -26,7 +27,16 @@
 
 <script lang="ts">
 import { defineComponent, ref, toRaw } from 'vue';
-import { Coin, Connection, Document, FolderOpened, SwitchButton, Tickets } from '@element-plus/icons';
+import {
+  Coin,
+  Connection,
+  Document,
+  FolderOpened,
+  Grid,
+  PictureFilled,
+  SwitchButton,
+  Tickets,
+} from '@element-plus/icons';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import serialize from 'serialize-javascript';
 
@@ -162,6 +172,16 @@ export default defineComponent({
               text: '按钮',
               type: 'button',
             },
+            {
+              icon: PictureFilled,
+              text: '图片',
+              type: 'img',
+            },
+            {
+              icon: Grid,
+              text: '二维码',
+              type: 'qrcode',
+            },
           ],
         },
       ]),