fix: 修复 editor 加载失败的问题

Author: 2betop

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "serve": "vite",
     "serve:dev": "vite --mode development",
@@ -27,6 +28,7 @@
     "sass": "^1.63.6",
     "vite": "^4.4.3",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-static-copy": "^1.0.1",
     "vite-plugin-vue2": "^2.0.3",
     "vue-template-compiler": "^2.7.14"
   }

src/components/AMISRenderer.vue

@@ -1,15 +1,55 @@
-<template><div></div></template>
+<template><div>Loading...</div></template>
 
 <script>
-import "amis/sdk/sdk.js";
-import "amis/sdk/sdk.css";
-import "amis/sdk/iconfont.css";
+// import "amis/sdk/sdk.js";
+// import "amis/sdk/sdk.css";
+// import "amis/sdk/iconfont.css";
 
 // 可以不引用, 如果你不想要任何辅助类样式的话 (比如 `m-t-xs` 这种)
 // https://aisuda.bce.baidu.com/amis/zh-CN/style/index
 import "amis/sdk/helper.css";
 import qs from "qs";
 
+function loadScript(src, callback) {
+  const script = document.createElement("script");
+  script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", src);
+  script.onload = () => callback();
+  script.onerror = () => callback(new Error(`Failed to load ${src}`));
+  document.body.appendChild(script);
+}
+
+function loadStyles(styles) {
+  for (const path of styles) {
+    const style = document.createElement("link");
+    style.setAttribute("rel", "stylesheet");
+    style.setAttribute("type", "text/css");
+    style.setAttribute("href", path);
+    document.head.appendChild(style);
+  }
+}
+
+function loadSDK() {
+  return new Promise((resolve, reject) => {
+    if (window.amisRequire) {
+      resolve();
+      return;
+    }
+    loadStyles([
+      "/amis/sdk/sdk.css",
+      "/amis/sdk/helper.css",
+      "/amis/sdk/iconfont.css",
+    ]);
+    loadScript("/amis/sdk/sdk.js", (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
 export default {
   name: "AMISRenderer",
   components: {},
@@ -52,7 +92,9 @@ export default {
           search: `?${qs.stringify(current.query)}`,
         };
       },
+      loading: false,
       amisInstance: null,
+      unmounted: false,
     };
   },
 
@@ -67,7 +109,17 @@ export default {
       this.updateProps();
     },
   },
-  mounted() {
+  async mounted() {
+    try {
+      this.loading = true;
+      await loadSDK();
+    } finally {
+      this.loading = false;
+    }
+    if (this.unmounted) {
+      return;
+    }
+
     const scoped = amisRequire("amis/embed");
     const { normalizeLink } = amisRequire("amis");
     const router = this.$router;
@@ -146,7 +198,8 @@ export default {
   },
 
   destroyed() {
+    this.unmounted = true;
     this.amisInstance?.unmount();
   },
 };
-</script>
+</script>

src/index.scss

@@ -1,15 +1,15 @@
 html,
 body,
 #app,
-.wrapper {
+.app-wrapper {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   position: relative;
 }
 
-.wrapper {
+.app-wrapper {
   display: flex;
 }
 

src/views/Form.vue

@@ -24,6 +24,12 @@ const schema = {
           placeholder: "请输入邮箱地址",
           name: "email",
         },
+        {
+          type: 'editor',
+          name: 'js',
+          label: 'JS',
+          language: 'javascript',
+        }
       ],
     },
   ],

src/views/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="app-wrapper">
     <el-container>
       <el-container>
         <el-aside :class="{ collapse: sidebarCollapse }" id="main-aside">

vite.config.js

@@ -3,6 +3,7 @@ import legacy from "@vitejs/plugin-legacy";
 import { createVuePlugin } from "vite-plugin-vue2";
 import viteCompression from "vite-plugin-compression";
 import path from "path";
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 const HOST = "0.0.0.0";
 const REPLACEMENT = `${path.resolve(__dirname, "./src")}/`;
@@ -28,6 +29,14 @@ export default (/** if you want to use mode : { mode }*/) => {
       ],
     },
     plugins: [
+      viteStaticCopy({
+        targets: [
+          {
+            src: path.resolve(__dirname, './node_modules/amis/sdk') + '/[!.]*',
+            dest: 'amis/sdk'
+          }
+        ]
+      }),
       createVuePlugin(/* options */),
       legacy({
         targets: ["ie >= 11"],