update: 调出代码展示框

package-lock.json

@@ -3912,6 +3912,15 @@
       "resolved": "https://r.cnpmjs.org/codemirror/download/codemirror-5.63.3.tgz",
       "integrity": "sha1-lwQqJCAn/gyHwJs2vAGTHTe3ZSc="
     },
+    "codemirror-editor-vue3": {
+      "version": "0.2.4",
+      "resolved": "https://rg.cnpmjs.org/codemirror-editor-vue3/download/codemirror-editor-vue3-0.2.4.tgz",
+      "integrity": "sha1-oS9YvwWMp74lCK/jW45EiguknAo=",
+      "requires": {
+        "codemirror": "^5.62.3",
+        "diff-match-patch": "^1.0.5"
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://r.cnpmjs.org/collection-visit/download/collection-visit-1.0.0.tgz",
@@ -10745,11 +10754,6 @@
         }
       }
     },
-    "prismjs": {
-      "version": "1.25.0",
-      "resolved": "https://r.cnpmjs.org/prismjs/download/prismjs-1.25.0.tgz",
-      "integrity": "sha1-b4It8b2tllc0sxCzFaIzFc+Zl1Y="
-    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://r.cnpmjs.org/process/download/process-0.11.10.tgz",
@@ -13202,15 +13206,6 @@
         "@vue/shared": "3.2.22"
       }
     },
-    "vue-codemirror": {
-      "version": "4.0.6",
-      "resolved": "https://r.cnpmjs.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz",
-      "integrity": "sha1-t4a7gNjXYqk6q45G95qBAG8EN8Q=",
-      "requires": {
-        "codemirror": "^5.41.0",
-        "diff-match-patch": "^1.0.0"
-      }
-    },
     "vue-demi": {
       "version": "0.12.1",
       "resolved": "https://r.cnpmjs.org/vue-demi/download/vue-demi-0.12.1.tgz",

package.json

@@ -29,6 +29,7 @@
     "@vue/compat": "^3.2.22",
     "@vue/compiler-sfc": "^3.2.22",
     "axios": "^0.21.4",
+    "codemirror-editor-vue3": "^0.2.4",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.4",
     "crypto-random-string": "^3.3.0",
@@ -51,7 +52,6 @@
     "object-inspect": "^1.11.0",
     "parse-package-name": "^0.1.0",
     "prettier": "^2.4.0",
-    "prismjs": "^1.20.0",
     "query-string": "^6.13.7",
     "register-service-worker": "^1.6.2",
     "split.js": "^1.6.2",
@@ -59,7 +59,6 @@
     "view-design": "^4.3.2",
     "vite": "^2.6.14",
     "vue": "^3.2.22",
-    "vue-codemirror": "^4.0.6",
     "vue-nestable": "^2.6.0",
     "vue-router": "^3.4.9",
     "vuex": "^3.1.2"

src/components/Code.vue

@@ -1,11 +1,8 @@
 <template>
   <el-dialog title="代码预览" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
-    <pre style="max-height: 60vh;">
-    <code v-html="formatCode"></code>
-    </pre>
-    <div>
-      <div style="color: #666; font-size: 12px;text-align">使用代码前请确认相应的组件库已集成至项目</div>
-    </div>
+    <!-- 这里加v-if是因为CodeEditor内部不支持watch数据监测 -->
+    <CodeEditor v-if="codeDialogVisible" style="max-height: 65vh;" ref="codeEditor" :initCode="prettyCode" mode="text/html"></CodeEditor>
+    <div style="color: #666; font-size: 12px; text-align:center; margin: 5px;">使用代码前请确认相应的组件库已集成至项目</div>
     <template v-slot:footer>
       <span>
         <el-tooltip effect="dark" content="拷贝" placement="left">
@@ -22,14 +19,18 @@
 
 <script>
 import './prism.css'
-import Prism from "prismjs";
 import prettier from "prettier/standalone";
 import parserHtml from "prettier/parser-html";
 import copy from 'copy-to-clipboard';
 import { saveAs } from "file-saver";
 
+import CodeEditor from './CodeEditor.vue'
+
 export default {
   props: ['rawCode', 'codeDialogVisible'],
+  components: {
+    CodeEditor
+  },
 
   data() {
     return {
@@ -94,10 +95,6 @@ export default {
       }
 
     },
-
-    formatCode() {
-      return Prism.highlight(this.prettyCode, Prism.languages.markup, "html");
-    }
   },
   fillter: {},
 };

src/components/CodeEditor.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="codemirror">
-    <codemirror v-model="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady"
+    <codemirror v-model:value="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady"
       @focus="onCmFocus" @blur="onCmBlur" />
   </div>
 </template>
 
 <script>
-import { codemirror } from 'vue-codemirror'
+import Codemirror from "codemirror-editor-vue3";
 
 // base style
 import 'codemirror/lib/codemirror.css'
@@ -62,7 +62,7 @@ export default {
   name: 'code-editor',
   title: 'Mode: text/x-vue & Theme: monokai',
   components: {
-    codemirror
+    Codemirror
   },
   computed: {
     code: {
@@ -74,6 +74,12 @@ export default {
       }
     }
   },
+  watch: {
+    initCode(){
+      this.codeStore = this.initCode;
+    }
+  },
+
   data() {
     return {
       codeStore: this.initCode,

src/components/JSCodeEditorDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
     :center=true>
-    <!-- <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/javascript"></CodeEditor> -->
+    <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>
@@ -14,13 +14,13 @@
 
 <script>
 import dedent from 'dedent'
-// import CodeEditor from './CodeEditor.vue'
+import CodeEditor from './CodeEditor.vue'
 
 export default {
   props: ['codeDialogVisible'],
-  emits: ['saveJSCode'],
+  emits: ['saveJSCode', 'update:codeDialogVisible'],
   components: {
-    // CodeEditor
+    CodeEditor
   },
 
   data() {
@@ -89,7 +89,7 @@ export default {
       // 网络请求，可选
     },
     handleClose() {
-      // this.$emit("update:codeDialogVisible", false);
+      this.$emit("update:codeDialogVisible", false);
     },
     onSave() {
       const code = this.$refs.codeEditor.getEditorCode();