VCC完成脱离及验证

src/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <vcc :initCodeEntity="codeStructure" @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"}}]}}]}}'
+
+export default {
+  components: {
+    vcc: () => import('./components-v2/VCC.vue')
+  },
+  data() {
+    return {
+      codeStructure: JSON.parse(initCodeStr),
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onCodeUpdate(newCodeEntity) {
+      // 编辑后新的代码结构
+    }
+  }
+}
+</script>

src/components-v2/VCC.vue

@@ -73,7 +73,7 @@ window.styleSourceMap = styleData;
 
 export default {
   name: "vcc",
-  props: [],
+  props: ['initCodeEntity'],
   components: {
     RawComponents,
     ToolsBar,
@@ -103,15 +103,13 @@ export default {
         attributeContainter.style = "right: calc(-300px - 20px); display:none;";
         this.$refs['attributeInput'].onHide();
       }
-    }
+    },
   },
   computed: {
   },
   beforeCreate() { },
   created() {
     this.mainPanelProvider = new MainPanelProvider();
-    // 方便调试追踪
-    window.mainPanelProvider = this.mainPanelProvider;
   },
   beforeMount() { },
   mounted() {
@@ -151,11 +149,12 @@ export default {
         if (this.$refs.codeStructure) {
           this.$refs.codeStructure.updateCode(codeRawVueInfo);
         }
+        this.$emit('updateCodeEntity', codeRawVueInfo);
       }).onNodeDeleted(() => {
         this.currentEditRawInfo = null;
       }).onSelectElement(rawInfo => {
         this.currentEditRawInfo = rawInfo;
-      }).render(this.getFakeData());
+      }).render(this.initCodeEntity ? this.initCodeEntity : this.getFakeData());
     },
 
     // 指向将要插入哪个元素之前

src/components/AttributeInput.vue

@@ -156,11 +156,9 @@ export default {
     },
 
     createNew() {
-      window.trackManager.track("lc_on_attribute_add");
       this.localAttributes.push({ key: "", value: "" });
     },
     save() {
-      window.trackManager.track("lc_on_attribute_save");
 
       try {
 
@@ -193,11 +191,9 @@ export default {
       }
     },
     remove() {
-      window.trackManager.track("lc_on_attribute_remove");
       this.$emit("remove", { lc_id: this.rawInfoID });
     },
     deleteItem(index) {
-      window.trackManager.track("lc_on_element_delete");
       this.localAttributes.splice(index, 1);
     },
     copyBro() {

src/components/Code.vue

@@ -66,7 +66,6 @@ export default {
       }
     },
     download() {
-      window.trackManager.track("lc_on_code_download");
       let blob = new Blob([this.prettyCode], {
         type: "text/plain;charset=utf-8",
       });

src/utils/initRawComponent.js

@@ -35,12 +35,6 @@ export function initElement(element) {
             }${getSplitTag()}${JSON.stringify(raw)}`;
         event.dataTransfer.setData("text/plain", str);
 
-        try {
-            const tag = getRawComponentKey(raw);
-            window.trackManager.track("lc_on_start_drag", {
-                tag,
-            });
-        } catch (error) { }
         event.stopPropagation();
     });