fix: 增加样式渲染能力

package-lock.json

@@ -2297,7 +2297,7 @@
     },
     "ant-design-vue": {
       "version": "1.7.8",
-      "resolved": "https://r.cnpmjs.org/ant-design-vue/download/ant-design-vue-1.7.8.tgz",
+      "resolved": "https://rg.cnpmjs.org/ant-design-vue/download/ant-design-vue-1.7.8.tgz",
       "integrity": "sha1-Grv4a2ik9bEAC+oEh7gDHcAAFmE=",
       "requires": {
         "@ant-design/icons": "^2.1.1",
@@ -4295,6 +4295,11 @@
         }
       }
     },
+    "css-scoped": {
+      "version": "1.0.0",
+      "resolved": "https://rg.cnpmjs.org/css-scoped/download/css-scoped-1.0.0.tgz",
+      "integrity": "sha1-pMfsm3A4bXy5o+wcw/Jsf9czjgc="
+    },
     "css-select": {
       "version": "2.1.0",
       "resolved": "https://r.cnpmjs.org/css-select/download/css-select-2.1.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "core-js": "^3.6.4",
     "crypto-random-string": "^3.3.0",
     "css": "^3.0.0",
+    "css-scoped": "^1.0.0",
     "element-ui": "^2.15.6",
     "escodegen": "^2.0.0",
     "espree": "^7.3.0",

src/libs/main-panel.js

@@ -11,6 +11,7 @@ import { getRawComponentContent, getRawComponentKey, isObject } from '@/utils/co
 import { createNewCodeGenerator } from "@/libs/code-generator-factory";
 const EventEmitter = require('eventemitter3');
 const { cloneDeep } = require('lodash');
+import scope from 'css-scoped';
 
 /**
  * 主控制面板辅助类，用于代码的生成与绘制
@@ -44,8 +45,6 @@ export class MainPanelProvider {
 
         console.groupCollapsed('---> for code generator warn <---');
 
-        const readyForMoutedElement = this.createMountedElement();
-
         // 生成原始代码
         let code = this.codeGenerator.outputVueCodeWithJsonObj(rawDataStructure);
 
@@ -61,6 +60,8 @@ export class MainPanelProvider {
 
         const { template, script, styles, customBlocks } = parseComponent(code);
 
+        this.loadStyle(styles);
+
         let newScript = script.content.replace(/\s*export default\s*/, "")
 
         const componentOptions = (new Function(`return ${newScript}`))();
@@ -73,6 +74,7 @@ export class MainPanelProvider {
         };
         componentOptions.staticRenderFns = res.staticRenderFns;
 
+        const readyForMoutedElement = this.createMountedElement();
         // 渲染当前代码
         new Vue(componentOptions).$mount(readyForMoutedElement);
 
@@ -99,6 +101,21 @@ export class MainPanelProvider {
         this.reRender();
     }
 
+    loadStyle(styles) {
+        if (styles.length > 0) {
+            const scopedStyle = styles[0];
+
+            this.styleNodeName = `cssScoped${Date.now()}`;
+
+            const scopedCss = scope(scopedStyle.content.replace(/::v-deep/g, ''), this.styleNodeName);
+            const styleNode = document.createElement('style');
+            styleNode.innerText = scopedCss;
+
+            // 这个会导致越来越卡
+            document.head.appendChild(styleNode);
+        }
+    }
+
     /**
      * 初始化代码编译
      */
@@ -122,6 +139,10 @@ export class MainPanelProvider {
      */
     createMountedElement() {
         const renderControlPanel = this.getControlPanelRoot();
+        if(this.styleNodeName) {
+            renderControlPanel.setAttribute('class', this.styleNodeName);
+        }
+
         const child = document.createElement('div');
 
         // 清空子节点