支持暴露JS代码以及通过JS代码初始化逻辑

Author: shangbin

package-lock.json

@@ -1,25 +1,43 @@
 <template>
-  <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
+  <vcc :initCodeEntity="codeInfoEntity" @updateCodeEntity="onCodeUpdate"></vcc>
 </template>
 
 <script>
 // 以这样一段结构初始化VCC组件
-const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"container","style":"min-height: 100%; padding-bottom: 100px;","lc_id":"container","__text__":"Hello，欢迎使用LCG，请往此区域拖拽组件","__children":[{"el-button":{"lc-mark":"","type":"danger","lc_id":"COAAYXizyI","__children":[],"__text__":"危险按钮","@click":"onButtonClick","size":"small"}}]}}]}}'
+const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"container","style":"min-height: 100%; padding-bottom: 100px;","lc_id":"container","__text__":"Hello，欢迎使用LCG，请往此区域拖拽组件","__children":[{"div": {"__text__": "{{showText}}", "lc_id": "text"}},{"el-button":{"lc-mark":"","type":"danger","lc_id":"COAAYXizyI","__children":[],"__text__":"{{showValue}}","@click":"hello","size":"small"}}]}}]}}'
 
 export default {
   components: {
     vcc: () => import('./components-v2/VCC.vue'),
   },
   data() {
     return {
-      codeStructure: JSON.parse(initCodeStr),
+      codeInfoEntity: {
+        codeStructure: JSON.parse(initCodeStr),
+        JSCode: `
+{
+  data() {
+    return { 
+      showValue: "开启预览模式后,点击我显示预设逻辑", 
+      showText: "这里的值声明于预设JS代码" 
+    };
+  },
+  methods: {
+    hello() {
+      alert("来自预设逻辑代码的问候");
+    },
+  },
+}`
+      },
     }
   },
   mounted() {
   },
   methods: {
-    onCodeUpdate(newCodeEntity) {
+    onCodeUpdate({ codeRawVueInfo, JSCode }) {
       // 编辑后新的代码结构
+      // codeRawVueInfo为template对象表示结构
+      // JSCode为显式输入的JS逻辑
     }
   }
 }

src/App.vue

@@ -23,7 +23,8 @@
     </div>
 
     <div class="copy">
-      <el-link :underline="false" href="https://vcc3.sahadev.tech/" style="color: red; margin-right: 10px;" class="animate__animated animate__headShake animate__infinite">
+      <el-link :underline="false" href="https://vcc3.sahadev.tech/" style="color: red; margin-right: 10px;"
+        class="animate__animated animate__headShake animate__infinite">
         👉🏻 尝试拥有更多组件库的Vue3版本</el-link>
       <div>
         <el-alert title="遇到问题？" type="info">
@@ -54,7 +55,7 @@
       <code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" :visible.sync="structureVisible"
         @codeRefresh="generateVueCode" @onLevelChange="onLevelChange">
       </code-structure>
-      <CodeEditor :codeDialogVisible.sync="jsDialogVisible" @saveJSCode="saveJSCode"></CodeEditor>
+      <CodeEditor :codeDialogVisible.sync="jsDialogVisible" @saveJSCode="saveJSCode" ref="codeEditor"></CodeEditor>
       <VueEditor :vueDialogVisible.sync="vueDialogVisible" @codeParseSucess="codeParseSucess"></VueEditor>
     </div>
 
@@ -96,7 +97,10 @@ export default {
       iconCode: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/code-working-outline.svg"),
       iconClear: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/trash-outline.svg"),
 
-      viewMode: false
+      viewMode: false,
+
+      codeRawVueInfo: "",
+      JSCode: ""
     };
   },
   watch: {
@@ -111,8 +115,12 @@ export default {
       }
     },
     initCodeEntity(newVal) {
-      if (newVal) {
-        this.mainPanelProvider.render(newVal);
+      if (newVal.JSCode) {
+        this.mainPanelProvider.saveJSCode(this.convertLogicCode(newVal.JSCode));
+      }
+
+      if (newVal.codeStructure) {
+        this.mainPanelProvider.render(newVal.codeStructure);
       }
     }
   },
@@ -135,6 +143,17 @@ export default {
   updated() { },
   destoryed() { },
   methods: {
+    convertLogicCode(JSCode) {
+      try {
+          const JSCodeInfo = eval(`(function(){return ${JSCode.replace(/\s+/g, "")}})()`);
+          // 保留JS代码
+          this.JSCode = JSCode;
+          this.$refs.codeEditor.updateLogicCode(JSCode);
+          return JSCodeInfo;
+        } catch (e) { 
+          console.warn(`外部逻辑代码解析出错，解析的逻辑代码为: ${JSCode}, Error: ${e}`);
+        }
+    },
 
     initShortcut() {
       keymaster('⌘+z, ctrl+z', () => {
@@ -163,12 +182,23 @@ export default {
         if (this.$refs.codeStructure) {
           this.$refs.codeStructure.updateCode(codeRawVueInfo);
         }
-        this.$emit('updateCodeEntity', codeRawVueInfo);
+        this.codeRawVueInfo = codeRawVueInfo;
+
+        this.notifyParent();
       }).onNodeDeleted(() => {
         this.currentEditRawInfo = null;
       }).onSelectElement(rawInfo => {
         this.currentEditRawInfo = rawInfo;
-      }).render(this.initCodeEntity ? this.initCodeEntity : this.getFakeData());
+      }).saveJSCodeOnly(this.convertLogicCode(this.initCodeEntity.JSCode))
+      .render(this.initCodeEntity.codeStructure ? this.initCodeEntity.codeStructure : this.getFakeData());
+    },
+
+    // 通知父组件
+    notifyParent() {
+      this.$emit('updateCodeEntity', {
+        codeRawVueInfo: this.codeRawVueInfo,
+        JSCode: this.JSCode
+      });
     },
 
     // 指向将要插入哪个元素之前
@@ -238,8 +268,11 @@ export default {
       this.mainPanelProvider.undo();
     },
 
-    saveJSCode(code) {
+    saveJSCode({ JSCodeInfo: code, JSCode }) {
       this.mainPanelProvider.saveJSCode(code);
+      // 保留JS代码
+      this.JSCode = JSCode;
+      this.notifyParent();
     },
 
     codeParseSucess(vueCodeEntity) {

src/components-v2/VCC.vue

@@ -83,21 +83,25 @@ export default {
   updated() { },
   destoryed() { },
   methods: {
-    // 在此自动生成
-    request() {
-      // 网络请求，可选
+    updateLogicCode(newCode) {
+      if (newCode) {
+        this.code = newCode;
+      }
     },
     handleClose() {
       this.$emit("update:codeDialogVisible", false);
     },
     onSave() {
       const code = this.$refs.codeEditor.getEditorCode();
       // 去掉注释
-      const temp = code.replace(/.+\*\/\s*/gs, "");
+      const temp = code.replace(/.+\*\/\s*/gs, "").replace(/\s+/g, "");
       try {
         // 转换为对象
         const JSCodeInfo = eval(`(function(){return ${temp}})()`);
-        this.$emit("saveJSCode", JSCodeInfo);
+        this.$emit("saveJSCode", {
+          JSCodeInfo,
+          JSCode: temp
+        });
         this.handleClose();
         this.error = '';
       } catch (error) {

src/components/JSCodeEditorDialog.vue

@@ -129,11 +129,16 @@ export class MainPanelProvider {
     }
 
     saveJSCode(code) {
-        this.externalJS = code;
+        this.saveJSCodeOnly(code);
         this.codeGenerator.setExternalJS(code);
         this.reRender();
     }
 
+    saveJSCodeOnly(code) {
+        this.externalJS = code || {};
+        return this;
+    }
+
     /**
      * 生成一个新的待挂载容器
      */