perf: 更换语法高亮插件

package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@amcharts/amcharts4": "^4.10.20",
     "@amcharts/amcharts4-geodata": "^4.1.20",
-    "@highlightjs/vue-plugin": "^2.0.1",
     "axios": "^0.21.1",
     "babel-plugin-lodash": "^3.3.4",
     "core-js": "^3.6.5",
@@ -23,13 +22,11 @@
     "moment-timezone": "^0.5.33",
     "node-sass": "^4.14.1",
     "postcss-px2rem-exclude": "0.0.6",
-    "prismjs": "^1.24.1",
     "sass-loader": "^8.0.2",
     "sass-resources-loader": "^2.2.1",
     "vue": "^3.0.0",
     "vue-grid-layout": "^3.0.0-beta1",
     "vue-i18n": "^9.1.6",
-    "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "^4.0.8",
     "vuex": "^4.0.1"
   },
@@ -65,7 +62,8 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-vue": "^7.7.0",
-    "uglifyjs-webpack-plugin": "^2.2.0"
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue3-ace-editor": "^2.0.2"
   },
   "browserslist": [
     "> 1%",

src/components/rightBox/settings/GalaxyProxyBox.vue

@@ -44,19 +44,36 @@
           </el-form-item>
           <!--target param-->
           <el-form-item :label="$t('galaxyProxy.targetParam')" prop="targetParam">
-            <prism-editor class="my-editor" v-model="editObject.targetParam" :highlight="jsonHl" line-numbers></prism-editor>
+<!--            <prism-editor class="my-editor" v-model="editObject.targetParam" :highlight="jsonHl" line-numbers></prism-editor>-->
+            <v-ace-editor
+                v-model:value="editObject.targetParam"
+                lang="json"
+                theme="chrome"
+                style="height: 300px" />
           </el-form-item>
           <!--target header-->
           <el-form-item :label="$t('galaxyProxy.targetHeader')" prop="targetHeader">
-            <prism-editor class="my-editor" v-model="editObject.targetHeader" :highlight="jsonHl" line-numbers></prism-editor>
+            <v-ace-editor
+                v-model:value="editObject.targetHeader"
+                lang="json"
+                theme="chrome"
+                style="height: 300px" />
           </el-form-item>
           <!--pre handle-->
           <el-form-item label="Pre handle" prop="preHandle">
-            <prism-editor class="my-editor" v-model="editObject.preHandle" :highlight="javascriptHl" line-numbers></prism-editor>
+            <v-ace-editor
+                v-model:value="editObject.preHandle"
+                lang="javascript"
+                theme="chrome"
+                style="height: 300px" />
           </el-form-item>
           <!--post handle-->
           <el-form-item label="Post handle" prop="postHandle">
-            <prism-editor class="my-editor" v-model="editObject.postHandle" :highlight="javascriptHl" line-numbers></prism-editor>
+            <v-ace-editor
+                v-model:value="editObject.postHandle"
+                lang="javascript"
+                theme="chrome"
+                style="height: 300px" />
           </el-form-item>
         </el-form>
       </div>
@@ -75,18 +92,16 @@
 <script>
 import rightBoxMixin from '@/mixins/rightBox'
 import { api } from '@/utils/api'
-import { PrismEditor } from 'vue-prism-editor'
+import { VAceEditor } from 'vue3-ace-editor'
-import 'vue-prism-editor/dist/prismeditor.min.css'
+import 'ace-builds/src-noconflict/mode-javascript'
-import { highlight, languages } from 'prismjs/components/prism-core'
+import 'ace-builds/src-noconflict/mode-json'
-import 'prismjs/components/prism-clike'
+import 'ace-builds/src-noconflict/theme-chrome'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/themes/prism-tomorrow.css'
 
 export default {
   name: 'GalaxyProxyBox',
   mixins: [rightBoxMixin],
   components: {
-    PrismEditor
+    VAceEditor
   },
   data () {
     return {
@@ -97,14 +112,6 @@ export default {
         ]
       }
     }
-  },
-  methods: {
-    jsonHl (code) {
-      return highlight(code, languages.js, 'json')
-    },
-    javascriptHl (code) {
-      return highlight(code, languages.js, 'javascript')
-    }
   }
 }
 </script>

src/views/settings/GalaxyProxy.vue

@@ -53,6 +53,7 @@ import galaxyProxyBox from '@/components/rightBox/settings/GalaxyProxyBox'
 import galaxyProxyTable from '@/components/table/settings/GalaxyProxyTable'
 import dataListMixin from '@/mixins/dataList'
 import { api } from '@/utils/api'
+import {get} from "@/utils/http";
 
 export default {
   name: 'GalaxyProxy',
@@ -70,6 +71,21 @@ export default {
         name: ''
       }
     }
+  },
+  methods: {
+    edit (u) {
+      get(`${this.url}/${u.id}`).then(response => {
+        if (response.code === 200) {
+          const editObject = response.data
+          editObject.targetHeader || (editObject.targetHeader = '')
+          editObject.preHandle || (editObject.preHandle = '')
+          editObject.postHandle || (editObject.postHandle = '')
+          editObject.targetParam || (editObject.targetParam = '')
+          this.object = editObject
+          this.rightBox.show = true
+        }
+      })
+    }
   }
 }
 </script>