Merge branch 'logicSaveAndInit' into vue3

Author: shangbin

src/App.vue

@@ -1,26 +1,44 @@
 <template>
-  <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
+  <vcc :initCodeEntity="codeInfoEntity" @updateCodeEntity="onCodeUpdate"></vcc>
 </template>
 
 <script>
 import { defineAsyncComponent } from 'vue'
 // 以这样一段结构初始化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: defineAsyncComponent(() => 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/components-v2/ToolsBar.vue

@@ -16,7 +16,7 @@
       </el-col>
       <el-col :span="3">
         <div style="display:inline-block;">
-          <el-link type="primary" @click="onEditModeChange">{{editMode ? 'View' : 'Edit'}}
+          <el-link :type="editMode? 'primary': 'danger'" @click="onEditModeChange">{{editMode ? 'View' : 'Edit'}}
             Mode</el-link>
         </div>
       </el-col>

src/components-v2/VCC.vue

@@ -51,7 +51,7 @@
       <code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" v-model="structureVisible"
         @reRender="render">
       </code-structure>
-      <CodeEditor v-model:codeDialogVisible="jsDialogVisible" @saveJSCode="saveJSCode"></CodeEditor>
+      <CodeEditor v-model:codeDialogVisible="jsDialogVisible" @saveJSCode="saveJSCode" ref="codeEditor"></CodeEditor>
       <VueEditor v-model:vueDialogVisible="vueDialogVisible" @codeParseSucess="codeParseSucess"></VueEditor>
     </div>
 
@@ -77,7 +77,14 @@ import keymaster from "keymaster"
 
 export default {
   name: "vcc",
-  props: ['initCodeEntity'],
+  props: {
+    initCodeEntity: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
   emits: ['updateCodeEntity'],
   components: {
     RawComponents: defineAsyncComponent(() => import("@/components/RawComponents.vue")),
@@ -99,7 +106,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"),
 
-      editMode: true
+      editMode: true,
+
+      codeRawVueInfo: "",
+      JSCode: ""
     };
   },
   watch: {
@@ -114,8 +124,12 @@ export default {
       }
     },
     initCodeEntity(newVal) {
-      if (newVal) {
-        this.mainPanelProvider.render(newVal);
+      if (newVal.JSCode) {
+        this.mainPanelProvider.saveJSCodeOnly(this.convertLogicCode(newVal.JSCode));
+      }
+
+      if (newVal.codeStructure) {
+        this.mainPanelProvider.render(newVal.codeStructure);
       }
     }
   },
@@ -129,6 +143,7 @@ export default {
   mounted() {
     Promise.all([import("../map/load")])
       .then(res => {
+        this.$emit("onLoadFinish");
         this.init();
       });
     splitInit();
@@ -138,6 +153,19 @@ export default {
   updated() { },
   destoryed() { },
   methods: {
+    convertLogicCode(JSCode) {
+      try {
+          const JSCodeInfo = eval(`(function(){return ${JSCode.replace(/\s+/g, "")}})()`);
+          // 保留JS代码
+          this.JSCode = JSCode;
+          if (this.$refs.codeEditor) {
+            this.$refs.codeEditor.updateLogicCode(JSCode);
+          }
+          return JSCodeInfo;
+        } catch (e) { 
+          console.warn(`外部逻辑代码解析出错，解析的逻辑代码为: ${JSCode}, Error: ${e}`);
+        }
+    },
 
     initShortcut() {
       keymaster('⌘+z, ctrl+z', () => {
@@ -173,12 +201,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 ? this.initCodeEntity.JSCode : ''))
+      .render(this.initCodeEntity.codeStructure ? this.initCodeEntity.codeStructure : this.getFakeData());
+    },
+
+    // 通知父组件
+    notifyParent() {
+      this.$emit('updateCodeEntity', {
+        codeRawVueInfo: this.codeRawVueInfo,
+        JSCode: this.JSCode
+      });
     },
 
     // 指向将要插入哪个元素之前
@@ -247,8 +286,11 @@ export default {
       this.mainPanelProvider.undo();
     },
 
-    saveJSCode(code) {
+    saveJSCode({ JSCodeInfo: code, JSCode }) {
       this.mainPanelProvider.saveJSCode(code);
+      // 保留JS代码
+      this.JSCode = JSCode;
+      this.notifyParent();
     },
 
     /**
@@ -444,6 +486,10 @@ export default {
   margin: 0 2px;
 }
 
+:root {
+  --animate-duration: 1.5s;
+}
+
 .in-element {
   outline: 2px solid #4dba87 !important;
   position: relative;

src/components/JSCodeEditorDialog.vue

@@ -3,10 +3,17 @@
     :center=true>
     <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/javascript"></CodeEditor>
 
-    <div style="text-align:center;padding: 10px;">
-      <el-button type="primary" @click="onSave">确认修改</el-button>
-      <div style="color: #6c6c6c; font-size:12px; margin-top:5px;">Tips: 确认修改之后将会影响最终生成的代码逻辑</div>
-      <div v-if="error" style="color: red; font-size:12px; margin-top:5px;">请检查语法错误：{{error}}</div>
+    <div style="padding: 10px; display:flex;justify-content: flex-end;align-items: center;">
+      <div>
+        <el-button type="primary" @click="onSave">确认修改</el-button>
+        <div v-if="error" style="color: red; font-size:12px; margin-top:5px;">请检查语法错误：{{error}}</div>
+      </div>
+
+      <div style="margin-left: 5px;">
+        <el-link href="https://vcc.sahadev.tech/doc/#/improve/logic?id=%e9%80%bb%e8%be%91%e6%a8%a1%e6%9d%bf"
+          target="_blank" icon="el-icon-question">帮助与说明</el-link>
+        <div style="color: #6c6c6c; font-size:12px; margin-top:5px;">Tips: 建议看一下使用说明</div>
+      </div>
     </div>
   </el-dialog>
 
@@ -16,27 +23,17 @@
 import dedent from 'dedent'
 import CodeEditor from './CodeEditor.vue'
 
-export default {
-  props: ['codeDialogVisible'],
-  emits: ['saveJSCode', 'update:codeDialogVisible'],
-  components: {
-    CodeEditor
-  },
+import prettier from "prettier/standalone";
+import babel from "prettier/parser-babel";
 
-  data() {
-    return {
-      error: '',
-      code: dedent`
+const example = dedent`
   /**
    *  以下代码中的方法会被注入到最终的代码中，如果命名与源代码有相同的，则会替换源代码
    *  内部集成了axios，开发者可以直接通过axios发起网络请求，不过接口需要允许跨域。
    *  可以通过https://apis.sahadev.tech/exchange?url=的方式访问实际地址可以解决跨域问题。
    *  axios官方文档：https://www.npmjs.com/package/axios
    */
   {
-      props: [],
-      components: {},
-
       data() {
         return {
 
@@ -55,25 +52,21 @@ export default {
           axios.get('https://apis.sahadev.tech/exchange?url=https://www.baidu.com').then(res => console.info(res), err => console.error(err));
         }
       },
-
-      // 生命周期 start
-      beforeCreate() {},
-      created() {},
-
-      beforeMount() {},
-      mounted() {},
-
-      beforeUpdate() {},
-      updated() {},
-
-      beforeDestory() {},
-      destoryed() {},
-      // 生命周期 end
-
-      fillter: {},
   };
-      
       `
+
+export default {
+  props: ['codeDialogVisible'],
+  emits: ['saveJSCode', 'update:codeDialogVisible'],
+  components: {
+    CodeEditor
+  },
+
+  data() {
+    return {
+      error: '',
+      code: example,
+      example: `${example}`
     };
   },
   beforeCreate() { },
@@ -84,21 +77,28 @@ export default {
   updated() { },
   destoryed() { },
   methods: {
-    // 在此自动生成
-    request() {
-      // 网络请求，可选
+    updateLogicCode(newCode) {
+      if (newCode) {
+        const pre = "const a = ";
+        this.code = prettier.format(pre + newCode, {
+          plugins: [babel],
+        }).replace(pre, "");
+      }
     },
     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/libs/code-generator-factory.js

@@ -33,7 +33,7 @@ export function createNewCodeGenerator() {
                     const kav = methodItem.split(":");
                     const key = kav[0];
                     // 这里获取的是原始data数据
-                    if (window.methodSourceMap[key]) {
+                    if (window.methodSourceMap && window.methodSourceMap[key]) {
                         return `${key}: ${window.methodSourceMap[key]}`;
                     } else {
                         return methodItem;

src/libs/element-ui/fonts/element-icons.ttf

@@ -129,11 +129,16 @@ export class MainPanelProvider {
     }
 
     saveJSCode(code) {
-        this.externalJS = code;
-        this.codeGenerator.setExternalJS(code);
+        this.saveJSCodeOnly(code);
+        this.codeGenerator && this.codeGenerator.setExternalJS(code);
         this.reRender();
     }
 
+    saveJSCodeOnly(code) {
+        this.externalJS = code || {};
+        return this;
+    }
+
     /**
      * 生成一个新的待挂载容器
      */
@@ -273,7 +278,12 @@ export class MainPanelProvider {
     enableEditMode() {
         const renderControlPanel = this.getControlPanelRoot();
         // 加一个延迟的作用是：给el-table这种绘制需要时间的组件留出充足的时间，否则会造成el-table渲染不到页面上
-        setTimeout(() => {
+        
+        if (this.enableDelayTask) {
+            clearTimeout(this.enableDelayTask);
+        }
+        
+        this.enableDelayTask = setTimeout(() => {
             // 这种方式可以禁用原节点所有的事件
             const elClone = renderControlPanel.cloneNode(true);
             renderControlPanel.parentNode.replaceChild(elClone, renderControlPanel);