Merge pull request #13 from sahadev/develop

Develop

package-lock.json

@@ -12684,7 +12684,7 @@
     },
     "vue-loader-v16": {
       "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://rg.cnpmjs.org/vue-loader/download/vue-loader-16.8.3.tgz",
+      "resolved": "https://r.cnpmjs.org/vue-loader/download/vue-loader-16.8.3.tgz",
       "integrity": "sha1-1D5nXe9bqTRdbH8FkUwT2GGZcIc=",
       "dev": true,
       "optional": true,

src/App.vue

@@ -1,10 +1,10 @@
 <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: {
@@ -12,14 +12,32 @@ export default {
   },
   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

@@ -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>
 
@@ -75,7 +76,14 @@ const keymaster = require('keymaster');
 
 export default {
   name: "vcc",
-  props: ['initCodeEntity'],
+  props: {
+    initCodeEntity: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
   components: {
     RawComponents: () => import("../components/RawComponents"),
     ToolsBar: () => import("./ToolsBar"),
@@ -96,7 +104,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 +122,12 @@ export default {
       }
     },
     initCodeEntity(newVal) {
-      if (newVal) {
+      if (newVal.JSCode) {
-        this.mainPanelProvider.render(newVal);
+        this.mainPanelProvider.saveJSCodeOnly(this.convertLogicCode(newVal.JSCode));
+      }
+
+      if (newVal.codeStructure) {
+        this.mainPanelProvider.render(newVal.codeStructure);
       }
     }
   },
@@ -126,6 +141,7 @@ export default {
   mounted() {
     Promise.all([import("../map/load")])
       .then(res => {
+        this.$emit("onLoadFinish");
         this.init();
       });
     splitInit();
@@ -135,6 +151,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', () => {
@@ -163,12 +192,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
+      });
     },
 
     // 指向将要插入哪个元素之前
@@ -238,8 +278,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/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;">
+    <div style="padding: 10px; display:flex;justify-content: flex-end;align-items: center;">
-      <el-button type="primary" @click="onSave">确认修改</el-button>
+      <div>
-      <div style="color: #6c6c6c; font-size:12px; margin-top:5px;">Tips: 确认修改之后将会影响最终生成的代码逻辑</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 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,16 +23,10 @@
 import dedent from 'dedent'
 import CodeEditor from './CodeEditor.vue'
 
-export default {
+import prettier from "prettier/standalone";
-  props: ['codeDialogVisible'],
+import babel from "prettier/parser-babel";
-  components: {
-    CodeEditor
-  },
 
-  data() {
+const example = dedent`
-    return {
-      error: '',
-      code: dedent`
   /**
    *  以下代码中的方法会被注入到最终的代码中，如果命名与源代码有相同的，则会替换源代码
    *  内部集成了axios，开发者可以直接通过axios发起网络请求，不过接口需要允许跨域。
@@ -33,9 +34,6 @@ export default {
    *  axios官方文档：https://www.npmjs.com/package/axios
    */
   {
-      props: [],
-      components: {},
-
       data() {
         return {
 
@@ -54,25 +52,20 @@ 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'],
+  components: {
+    CodeEditor
+  },
+
+  data() {
+    return {
+      error: '',
+      code: example,
+      example: `${example}`
     };
   },
   beforeCreate() { },
@@ -83,9 +76,13 @@ export default {
   updated() { },
   destoryed() { },
   methods: {
-    // 在此自动生成
+    updateLogicCode(newCode) {
-    request() {
+      if (newCode) {
-      // 网络请求，可选
+        const pre = "const a = ";
+        this.code = prettier.format(pre + newCode, {
+          plugins: [babel],
+        }).replace(pre, "");
+      }
     },
     handleClose() {
       this.$emit("update:codeDialogVisible", false);
@@ -93,11 +90,14 @@ export default {
     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/bundle-core-esm.js

@@ -1,7 +1,7 @@
 //该文件会遍历Object，获取关键的class,事件,data, 最终拼装为一个完整的SFC文件
 
 import stringifyObject from 'stringify-object';
-import _ from 'lodash';
+import { merge, cloneDeep } from 'lodash';
 import prettier from 'prettier/standalone.js';
 import parserBabel from 'prettier/parser-babel.js';
 
@@ -424,7 +424,6 @@ const scriptTemplate = `{
     fillter: {},
   };`;
 
-const { merge, cloneDeep } = _;
 
 const rawAdd = Set.prototype.add;
 Set.prototype.add = function (value) {

src/libs/code-generator-factory.js

@@ -34,7 +34,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/main-panel.js

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

src/main.js

@@ -1,13 +1,11 @@
 import Vue from "vue";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
-
-import AntdUI from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
+
 import APP from "./App.vue";
 
 Vue.use(ElementUI);
-Vue.use(AntdUI);
 
 // 内部需要同样配置的全局Vue
 self.Vue = Vue;