预览 json, xml

2022-12-23 12:52:36 +08:00
parent 955f86201f
commit 8c05f41bc9
4 changed files with 82 additions and 60 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
  },
  "dependencies": {
    "@element-plus/icons-vue": "2.0.10",
+    "@highlightjs/vue-plugin": "^2.1.0",
    "@vueuse/core": "9.5.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
@ -26,7 +27,7 @@
    "element-plus": "2.2.21",
    "file-saver": "2.0.5",
    "fuse.js": "6.6.2",
-    "highlight.js": "10.5.0",
+    "highlight.js": "^11.7.0",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.3.1",
    "nprogress": "0.2.0",
--- a/src/main.js
+++ b/src/main.js
@ -1,81 +1,96 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";

-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";

-import ElementPlus from 'element-plus'
-import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
+import ElementPlus from "element-plus";
+import locale from "element-plus/lib/locale/lang/zh-cn"; // 中文语言

-import '@/assets/styles/index.scss' // global css
+import "@/assets/styles/index.scss"; // global css

-import App from './App'
-import store from './store'
-import router from './router'
-import directive from './directive' // directive
+import App from "./App";
+import store from "./store";
+import router from "./router";
+import directive from "./directive"; // directive

+// 高亮
+import "highlight.js/styles/atom-one-dark.css";
+import hljs from "highlight.js/lib/core";
+import json from "highlight.js/lib/languages/json";
+import xml from "highlight.js/lib/languages/xml";
+import hljsVuePlugin from "@highlightjs/vue-plugin";
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("xml", xml);

 // 注册指令
-import plugins from './plugins' // plugins
-import { download } from '@/utils/request'
+import plugins from "./plugins"; // plugins
+import { download } from "@/utils/request";

 // svg图标
-import 'virtual:svg-icons-register'
-import SvgIcon from '@/components/SvgIcon'
-import elementIcons from '@/components/SvgIcon/svgicon'
+import "virtual:svg-icons-register";
+import SvgIcon from "@/components/SvgIcon";
+import elementIcons from "@/components/SvgIcon/svgicon";

-import './permission' // permission control
+import "./permission"; // permission control

-import { useDict } from '@/utils/dict'
-import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
+import { useDict } from "@/utils/dict";
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  handleTree,
+  selectDictLabel,
+  selectDictLabels,
+} from "@/utils/ruoyi";

 // 分页组件
-import Pagination from '@/components/Pagination'
+import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from '@/components/RightToolbar'
+import RightToolbar from "@/components/RightToolbar";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview";
 // 自定义树选择组件
-import TreeSelect from '@/components/TreeSelect'
+import TreeSelect from "@/components/TreeSelect";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";

-const app = createApp(App)
+const app = createApp(App);

 // 全局方法挂载
-app.config.globalProperties.useDict = useDict
-app.config.globalProperties.download = download
-app.config.globalProperties.parseTime = parseTime
-app.config.globalProperties.resetForm = resetForm
-app.config.globalProperties.handleTree = handleTree
-app.config.globalProperties.addDateRange = addDateRange
-app.config.globalProperties.selectDictLabel = selectDictLabel
-app.config.globalProperties.selectDictLabels = selectDictLabels
+app.config.globalProperties.useDict = useDict;
+app.config.globalProperties.download = download;
+app.config.globalProperties.parseTime = parseTime;
+app.config.globalProperties.resetForm = resetForm;
+app.config.globalProperties.handleTree = handleTree;
+app.config.globalProperties.addDateRange = addDateRange;
+app.config.globalProperties.selectDictLabel = selectDictLabel;
+app.config.globalProperties.selectDictLabels = selectDictLabels;

 // 全局组件挂载
-app.component('DictTag', DictTag)
-app.component('Pagination', Pagination)
-app.component('TreeSelect', TreeSelect)
-app.component('FileUpload', FileUpload)
-app.component('ImageUpload', ImageUpload)
-app.component('ImagePreview', ImagePreview)
-app.component('RightToolbar', RightToolbar)
+app.component("DictTag", DictTag);
+app.component("Pagination", Pagination);
+app.component("TreeSelect", TreeSelect);
+app.component("FileUpload", FileUpload);
+app.component("ImageUpload", ImageUpload);
+app.component("ImagePreview", ImagePreview);
+app.component("RightToolbar", RightToolbar);

-app.use(router)
-app.use(store)
-app.use(plugins)
-app.use(elementIcons)
-app.component('svg-icon', SvgIcon)
-
-directive(app)
+app.use(router);
+app.use(store);
+app.use(plugins);
+app.use(elementIcons);
+app.use(hljsVuePlugin);
+app.component("svg-icon", SvgIcon);
+directive(app);

 // 使用element-plus 并且设置全局的大小
 app.use(ElementPlus, {
  locale: locale,
  // 支持 large、default、small
-  size: Cookies.get('size') || 'default'
-})
+  size: Cookies.get("size") || "default",
+});

-app.mount('#app')
+app.mount("#app");
--- a/src/plugins/package/designer/ProcessDesigner.vue
+++ b/src/plugins/package/designer/ProcessDesigner.vue
@ -216,15 +216,18 @@
      append-to-body
      destroy-on-close
    >
-      <!-- <highlightjs
+      <highlightjs
        :language="previewType"
        :code="previewResult"
        style="height: 60vh"
-      /> -->
+      />
+      <!-- <pre>
+        <code>
+          {{ previewResult }}
+        </code>
+      </pre> -->
      <!-- <div
-        v-html="
-          highlightjs.highlight(previewResult, { language: previewType }).value
-        "
+        v-html="highlightjs.highlight('xml', { code: previewResult }).value"
      ></div> -->
    </el-dialog>
  </div>
@ -251,7 +254,6 @@ import activitiModdleExtension from "./plugins/extension-moddle/activiti";
 import flowableModdleExtension from "./plugins/extension-moddle/flowable";
 // 引入json转换与高亮
 import convert from "xml-js";
-// import highlightjs from "@/plugins/package/highlight";

 import { computed, onMounted, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
@ -652,5 +654,5 @@ function previewProcessJson() {
 }
 </script>
 <style>
-@import "highlight.js/styles/atom-one-dark-reasonable.css";
+/* @import "highlight.js/styles/atom-one-dark-reasonable.css"; */
 </style>
--- a/src/plugins/package/highlight/index.js
+++ b/src/plugins/package/highlight/index.js
@ -1,5 +1,9 @@
 import hljs from "highlight.js/lib/core";
-hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
-hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
+import json from "highlight.js/lib/languages/json";
+import xml from "highlight.js/lib/languages/xml";
+// import hljsVuePlugin from "@highlightjs/vue-plugin";
+
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("xml", xml);

 export default hljs;