feat: Vue二次编辑集成进入VCC

src/App.vue

@@ -1,17 +1,14 @@
 <template>
-  <!-- <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc> -->
+  <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
-  <compile-vue-online></compile-vue-online>
 </template>
 
 <script>
-import CompileVueOnline from './test/compileVueOnline.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"}}]}}]}}'
 
 export default {
   components: {
     vcc: () => import('./components-v2/VCC.vue'),
-    CompileVueOnline
   },
   data() {
     return {

src/components-v2/VCC.vue

@@ -23,11 +23,15 @@
     </div>
 
     <div class="copy">
-      <div style="display:inline-block; width:260px;">
+      <div>
-        <el-alert title="遇到问题？点击我查看帮助文档" @click="help" type="info">
+        <el-alert title="遇到问题？" type="info">
+          <el-link :underline="false" @click="help" style="font-size: 12px; margin-top: 5px;">点击我查看帮助文档</el-link>
         </el-alert>
       </div>
 
+      <el-tooltip effect="dark" content="二次编辑" placement="top-start">
+        <div class="round-icon icon-vue" alt="" @click="vueDialogVisible = true">Vue</div>
+      </el-tooltip>
       <el-tooltip effect="dark" content="编辑JS逻辑" placement="top-start">
         <div class="round-icon icon-js" alt="" @click="jsDialogVisible = true">JS</div>
       </el-tooltip>
@@ -49,6 +53,7 @@
         @codeRefresh="generateVueCode" @onLevelChange="onLevelChange">
       </code-structure>
       <CodeEditor :codeDialogVisible.sync="jsDialogVisible" @saveJSCode="saveJSCode"></CodeEditor>
+      <VueEditor :vueDialogVisible.sync="vueDialogVisible" @codeParseSucess="codeParseSucess"></VueEditor>
     </div>
 
     <!-- 辅助定位线 -->
@@ -75,7 +80,8 @@ export default {
     AttributeInput: () => import("../components/AttributeInput"),
     CodeStructure: () => import("../components/CodeStructure"),
     "lc-code": () => import("../components/Code"),
-    CodeEditor: () => import('../components/JSCodeEditorDialog.vue')
+    CodeEditor: () => import('../components/JSCodeEditorDialog.vue'),
+    VueEditor: () => import('../components/VueCodeParseDialog.vue')
   },
   data() {
     return {
@@ -84,6 +90,7 @@ export default {
       codeDialogVisible: false,
       structureVisible: false,
       jsDialogVisible: false,
+      vueDialogVisible: false,
       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"),
 
@@ -233,6 +240,10 @@ export default {
       this.mainPanelProvider.saveJSCode(code);
     },
 
+    codeParseSucess(vueCodeEntity) {
+      this.mainPanelProvider.render(vueCodeEntity);
+    },
+
     help() {
       window.open('/doc')
     }
@@ -309,7 +320,7 @@ export default {
   width: 40px;
   height: 40px;
   border-radius: 20px;
-  padding: 10px;
+  padding: 10px 0;
   margin-left: 10px;
   border: 0px;
   box-sizing: border-box;
@@ -321,6 +332,12 @@ export default {
   text-align: center;
 }
 
+.icon-vue {
+  line-height: 20px;
+  color: white;
+  text-align: center;
+}
+
 .cross-flag {
   position: fixed;
   right: 0;

src/components/CodeEditor.vue

@@ -135,6 +135,7 @@ export default {
 <style>
 .CodeMirror {
   height: 100% !important;
+  min-height: 50vh;
 }
 
 .vue-codemirror {

src/components/VueCodeParseDialog.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-dialog title="Vue二次编辑" :visible.sync="vueDialogVisible" width="70%" top="10vh" :before-close="handleClose"
+    :center=true>
+    <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code"></CodeEditor>
+
+    <div style="text-align:center;padding: 10px;">
+      <el-button type="primary" @click="compile">开始解析</el-button>
+      <div style="color: #6c6c6c; font-size:12px; margin-top:5px;">Tips: 解析成功后VCC将展示解析后的效果</div>
+      <div v-if="error" style="color: red; font-size:12px; margin-top:5px;">请检查语法错误：{{error}}</div>
+    </div>
+  </el-dialog>
+
+</template>
+
+<script>
+import dedent from 'dedent'
+import CodeEditor from './CodeEditor.vue'
+import { html2Json } from '../libs/bundle-html2json-esm';
+import { ergodic, findAObject } from '../utils/common';
+
+export default {
+  props: ['vueDialogVisible'],
+  components: {
+    CodeEditor
+  },
+
+  data() {
+    return {
+      error: '',
+      code: dedent`
+  /**
+   *  请在此文本框贴入完整的Vue代码，并点击“开始解析”按钮。
+   *  目前仅支持简单的Vue文件。如果代码中包含其它组件，则不会正常展示，但依旧支持二次编辑。
+   */
+`
+    };
+  },
+  beforeCreate() { },
+  created() { },
+  beforeMount() { },
+  mounted() { },
+  beforeUpdate() { },
+  updated() { },
+  destoryed() { },
+  methods: {
+    handleClose() {
+      this.$emit("update:vueDialogVisible", false);
+    },
+    async compile() {
+      try {
+        const code = this.$refs.codeEditor.getEditorCode();
+        // 去掉注释，注释的替换逻辑并不健壮，用的是贪心方式
+        // const temp = code.replace(/.+\*\/\s*/gs, "");
+        const temp = code;
+
+        if (temp) {
+          // 解析Vue
+          const obj = await html2Json(temp);
+          // 取出template结构
+          const template = findAObject(obj.root.__children, 'template');
+
+          if (template) {
+            // 为每个节点增加lc_id
+            ergodic(template);
+            // 通知VCC渲染此结构
+            this.$emit("codeParseSucess", template);
+            this.handleClose();
+          } else {
+            this.error = 'Vue解析失败，请检查是不是完整的Vue结构';
+          }
+        } else {
+          this.error = '请输入Vue代码';
+        }
+      } catch (error) {
+        console.warn(error);
+        this.error = error;
+      }
+    },
+  },
+  watch: {
+  },
+  computed: {
+  },
+  fillter: {},
+};
+</script>
+
+<style scoped>
+/*  在此自动生成 */
+
+::v-deep .el-dialog__body {
+  padding: 0 30px !important;
+}
+</style>

src/test/compileVueOnline.vue

@@ -13,15 +13,8 @@
 
 <script>
 import { html2Json } from '../libs/bundle-html2json-esm';
+import { ergodic, findAObject } from '../utils/common';
 import vcc from '../components-v2/VCC.vue';
-import { ergodic } from '../utils/common';
-
-function findAObject(array, propertyName) {
-  const module = array.find(function (ele) {
-    return ele[propertyName];
-  });
-  return module || null;
-}
 
 export default {
   props: [],

src/utils/common.js

@@ -53,4 +53,19 @@ export function ergodic(jsonObj) {
      jsonObj["lc_id"] = cryptoRandomString({ length: 10, type: "base64" });
    }
  }
+}
+
+/**
+ * 从解析后的Vue结构中找到关键的根节点
+ * 根节点分包是：template/script/style
+ * 
+ * @param {*} array 
+ * @param {*} propertyName 
+ * @returns 
+ */
+export function findAObject(array, propertyName) {
+  const module = array.find(function (ele) {
+    return ele[propertyName];
+  });
+  return module || null;
 }