将 highlight 代码高亮的全局引入，改成局部引入

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -196,11 +196,8 @@
       max-height="600px"
     >
       <!-- append-to-body -->
-      <div v-highlight>
+      <div>
-        <code class="hljs">
+        <pre><code class="hljs" v-html="highlightedCode(previewResult)"></code></pre>
-          <!-- 高亮代码块 -->
-          {{ previewResult }}
-        </code>
       </div>
     </Dialog>
   </div>
@@ -368,9 +365,9 @@ const additionalModules = computed(() => {
   return Modules
 })
 const moddleExtensions = computed(() => {
-  console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
+  // console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
-  console.log(props.moddleExtension, 'props.moddleExtension')
+  // console.log(props.moddleExtension, 'props.moddleExtension')
-  console.log(props.prefix, 'props.prefix')
+  // console.log(props.prefix, 'props.prefix')
   const Extensions: any = {}
   // 仅使用用户自定义模块
   if (props.onlyCustomizeModdle) {
@@ -433,22 +430,22 @@ const initBpmnModeler = () => {
 
   // bpmnModeler.createDiagram()
 
-  console.log(bpmnModeler, 'bpmnModeler111111')
+  // console.log(bpmnModeler, 'bpmnModeler111111')
   emit('init-finished', bpmnModeler)
   initModelListeners()
 }
 
 const initModelListeners = () => {
   const EventBus = bpmnModeler.get('eventBus')
-  console.log(EventBus, 'EventBus')
+  // console.log(EventBus, 'EventBus')
   // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
   props.events.forEach((event: any) => {
     EventBus.on(event, function (eventObj) {
-      let eventName = event.replace(/\./g, '-')
+      // let eventName = event.replace(/\./g, '-')
       // eventName.name = eventName
       let element = eventObj ? eventObj.element : null
-      console.log(eventName, 'eventName')
+      // console.log(eventName, 'eventName')
-      console.log(element, 'element')
+      // console.log(element, 'element')
       emit('element-click', element, eventObj)
       // emit(eventName, element, eventObj)
     })
@@ -475,7 +472,7 @@ const initModelListeners = () => {
 }
 /* 创建新的流程图 */
 const createNewDiagram = async (xml) => {
-  console.log(xml, 'xml')
+  // console.log(xml, 'xml')
   // 将字符串转换成图显示出来
   let newId = props.processId || `Process_${new Date().getTime()}`
   let newName = props.processName || `业务流程_${new Date().getTime()}`
@@ -484,7 +481,7 @@ const createNewDiagram = async (xml) => {
     // console.log(xmlString, 'xmlString')
     // console.log(this.bpmnModeler.importXML);
     let { warnings } = await bpmnModeler.importXML(xmlString)
-    console.log(warnings, 'warnings')
+    // console.log(warnings, 'warnings')
     if (warnings && warnings.length) {
       warnings.forEach((warn) => console.warn(warn))
     }
@@ -564,7 +561,7 @@ const downloadProcessAsSvg = () => {
 }
 const processSimulation = () => {
   simulationStatus.value = !simulationStatus.value
-  console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
+  // console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
   props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode()
 }
 const processRedo = () => {
@@ -627,7 +624,7 @@ const elementsAlign = (align) => {
 }
 /*-----------------------------    方法结束     ---------------------------------*/
 const previewProcessXML = () => {
-  console.log(bpmnModeler.saveXML, 'bpmnModeler')
+  // console.log(bpmnModeler.saveXML, 'bpmnModeler')
   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
     // console.log(xml, 'xml111111')
     previewResult.value = xml
@@ -663,10 +660,10 @@ const previewProcessJson = () => {
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 const processSave = async () => {
-  console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
+  // console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
   const { err, xml } = await bpmnModeler.saveXML()
-  console.log(err, 'errerrerrerrerr')
+  // console.log(err, 'errerrerrerrerr')
-  console.log(xml, 'xmlxmlxmlxmlxml')
+  // console.log(xml, 'xmlxmlxmlxmlxml')
   // 读取异常时抛出异常
   if (err) {
     // this.$modal.msgError('保存模型失败，请重试！')
@@ -685,11 +682,36 @@ const processSave = async () => {
 //   return result.value || '&nbsp;'
 // }
 onBeforeMount(() => {
-  console.log(props, 'propspropspropsprops')
+  // console.log(props, 'propspropspropsprops')
 })
-onMounted(() => {
+/**
+ * 代码高亮
+ */
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import java from 'highlight.js/lib/languages/java'
+import xml from 'highlight.js/lib/languages/java'
+import javascript from 'highlight.js/lib/languages/javascript'
+import sql from 'highlight.js/lib/languages/sql'
+import typescript from 'highlight.js/lib/languages/typescript'
+const highlightedCode = (item) => {
+  const language = item.filePath.substring(item.filePath.lastIndexOf('.') + 1)
+  const result = hljs.highlight(language, item.code || '', true)
+  return result.value || '&nbsp;'
+}
+
+/** 初始化 **/
+onMounted(async () => {
   initBpmnModeler()
   createNewDiagram(props.value)
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('java', java)
+  hljs.registerLanguage('xml', xml)
+  hljs.registerLanguage('html', xml)
+  hljs.registerLanguage('vue', xml)
+  hljs.registerLanguage('javascript', javascript)
+  hljs.registerLanguage('sql', sql)
+  hljs.registerLanguage('typescript', typescript)
 })
 onBeforeUnmount(() => {
   // this.$once('hook:beforeDestroy', () => {

src/locales/en.ts

@@ -443,5 +443,6 @@ export default {
     btn_zoom_in: 'Zoom in',
     btn_zoom_out: 'Zoom out',
     preview: 'Preivew'
-  }
+  },
+  'OAuth 2.0': 'OAuth 2.0'
 }

src/locales/zh-CN.ts

@@ -436,5 +436,6 @@ export default {
     btn_zoom_in: '放大',
     btn_zoom_out: '缩小',
     preview: '预览'
-  }
+  },
+  'OAuth 2.0': 'OAuth 2.0'
 }

src/views/bpm/model/modelEditor.vue

@@ -66,11 +66,11 @@ const model = ref<ModelVO>()
 onMounted(() => {
   // 如果 modelId 非空，说明是修改流程模型
   const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
-  console.log(modelId, 'modelId')
+  // console.log(modelId, 'modelId')
   if (modelId) {
     // let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
     getModelApi(modelId as unknown as number).then((data) => {
-      console.log(data, 'response')
+      // console.log(data, 'response')
       xmlString.value = data.bpmnXml
       model.value = {
         ...data,
@@ -101,8 +101,8 @@ onMounted(() => {
 const initModeler = (item) => {
   setTimeout(() => {
     modeler.value = item
-    console.log(item, 'initModeler方法modeler')
+    // console.log(item, 'initModeler方法modeler')
-    console.log(modeler.value, 'initModeler方法modeler')
+    // console.log(modeler.value, 'initModeler方法modeler')
     // controlForm.value.prefix = '2222'
   }, 10)
 }
@@ -112,12 +112,12 @@ const save = (bpmnXml) => {
     ...(model.value ?? ({} as ModelVO)),
     bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
   }
-  console.log(data, 'data')
+  // console.log(data, 'data')
 
   // 修改的提交
   if (data.id) {
-    updateModelApi(data).then((response) => {
+    updateModelApi(data).then(() => {
-      console.log(response, 'response')
+      // console.log(response, 'response')
       message.success('修改成功')
       // 跳转回去
       close()
@@ -125,8 +125,8 @@ const save = (bpmnXml) => {
     return
   }
   // 添加的提交
-  createModelApi(data).then((response) => {
+  createModelApi(data).then(() => {
-    console.log(response, 'response1')
+    // console.log(response, 'response1')
     message.success('保存成功')
     // 跳转回去
     close()