right panel

2022-12-15 17:30:55 +08:00
parent b9fcfbfb6b
commit 57bcaecc90
23 changed files with 1425 additions and 1130 deletions
--- a/public/preview.html
+++ b/public/preview.html
@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>form-generator-preview</title>
+  <link href="https://unpkg.com/browse/element-plus@2.2.26/dist/index.css" rel="stylesheet">
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <script src="https://unpkg.com/browse/vue-router@4.1.6/dist/vue-router.global.prod.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="https://unpkg.com/browse/element-plus@2.2.26/dist/index.full.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      overflow-x: hidden;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+      height: calc(100vh - 33px);
+      padding: 12px;
+      box-sizing: border-box;
+      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    }
+
+    input,
+    textarea {
+      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    }
+  </style>
+</head>
+
+<body>
+  <noscript>
+    <strong>抱歉，javascript被禁用，请开启后重试。</strong>
+  </noscript>
+  <div id="previewApp"></div>
+  <script type="text/javascript">
+    Vue.prototype.$axios = axios
+    const childAttrs = {
+      file: '',
+      dialog: ' width="600px" class="dialog-width" v-if="visible" :visible.sync="visible" :modal-append-to-body="false" '
+    }
+
+    window.addEventListener('message', init, false)
+    function init(event) {
+      if (event.data.type === 'refreshFrame') {
+        const code = event.data.data
+        const attrs = childAttrs[code.generateConf.type]
+        let links = ''
+
+        if (Array.isArray(code.links) && code.links.length > 0) {
+          links = buildLinks(code.links)
+        }
+
+        document.getElementById('previewApp').innerHTML = `${links}<style>${code.css}</style><div id="app"></div>`
+
+        if (Array.isArray(code.scripts) && code.scripts.length > 0) {
+          this.loadScriptQueue(code.scripts, () => {
+            newVue(attrs, code.js, code.html)
+          })
+        } else {
+          newVue(attrs, code.js, code.html)
+        }
+      }
+    }
+    function buildLinks(links) {
+      let strs = ''
+      links.forEach(url => {
+        strs += `<link href="${url}" rel="stylesheet">`
+      })
+      return strs
+    }
+    function newVue(attrs, main, html) {
+      main = eval(`(${main})`)
+      main.template = `<div>${html}</div>`
+      new Vue({
+        components: {
+          child: main
+        },
+        data() {
+          return {
+            visible: true
+          }
+        },
+        template: `<div><child ${attrs}/></div>`
+      }).$mount('#app')
+    }
+  </script>
+</body>
+
+</html>