diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json index 1d1ab3979cda2b6b837f88598b65ae5bf455b354..151fdc2e188b961f015d6ec154b5d8fb95c447b2 100644 --- a/dashboard/package-lock.json +++ b/dashboard/package-lock.json @@ -11,9 +11,11 @@ "@antv/g2": "v4.2.8", "@antv/g6": "^4.8.5", "@antv/vis-predict-engine": "^0.1.1", + "@highlightjs/vue-plugin": "^2.1.0", "@layui/layui-vue": "1.8.4", "axios": "^1.2.1", "echarts": "^5.4.1", + "highlight.js": "^11.7.0", "js-base64": "^3.7.2", "mockjs": "^1.1.0", "monaco-editor": "^0.34.1", @@ -848,6 +850,15 @@ "node": ">=12" } }, + "node_modules/@highlightjs/vue-plugin": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz", + "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==", + "peerDependencies": { + "highlight.js": "^11.0.1", + "vue": "^3" + } + }, "node_modules/@intlify/core-base": { "version": "9.1.10", "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.1.10.tgz", @@ -2449,6 +2460,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/highlight.js": { + "version": "11.7.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz", + "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/htmlparser2": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz", diff --git a/dashboard/package.json b/dashboard/package.json index 7ba33b7993bcb4418459c0b9347bf98de9878408..201ab523a982e657085350f6366ba3bcf288952e 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -11,9 +11,11 @@ "@antv/g2": "v4.2.8", "@antv/g6": "^4.8.5", "@antv/vis-predict-engine": "^0.1.1", + "@highlightjs/vue-plugin": "^2.1.0", "@layui/layui-vue": "1.8.4", "axios": "^1.2.1", "echarts": "^5.4.1", + "highlight.js": "^11.7.0", "js-base64": "^3.7.2", "mockjs": "^1.1.0", "monaco-editor": "^0.34.1", diff --git a/dashboard/src/main.ts b/dashboard/src/main.ts index 7c98cffc07f471bfb60eccf154a9b0aaff710374..7173ca17113bfb22152c8903ee83577ee7ffddaa 100644 --- a/dashboard/src/main.ts +++ b/dashboard/src/main.ts @@ -13,3 +13,33 @@ app.use(Router); app.directive("permission",permission); app.mount('#app'); + +// 代码高亮插件 +import hljs from 'highlight.js'; +// 必须导入 否则没样式 +import 'highlight.js/styles/github-dark-dimmed.css'; +import 'highlight.js/lib/common'; +import hjsVuePlugin from '@highlightjs/vue-plugin'; +const high: any = { + deep: true, + bind: function (el: any, binding: any) { + const targets = el.querySelectorAll('code') + targets.forEach((target: any) => { + if (binding.value) { + target.textContent = binding.value; + } + (hljs as any).highlightBlock(target); + }) + }, + componentUpdated: function (el: any, binding: any) { + const targets = el.querySelectorAll('code') + targets.forEach((target: any) => { + if (binding.value) { + target.textContent = binding.value; + (hljs as any).highlightBlock(target); + } + }) + } +} +app.directive('highlightjs', high) +app.use(hjsVuePlugin); diff --git a/dashboard/src/mockjs/user.ts b/dashboard/src/mockjs/user.ts index a0770eb144865141845df033c5017969ec1ae285..2e2dbc440d86509a2d256aa4d270ba50f22e8c6d 100644 --- a/dashboard/src/mockjs/user.ts +++ b/dashboard/src/mockjs/user.ts @@ -37,7 +37,7 @@ const menus = [ { id: "/engine-manager", icon: "layui-icon-senior", - title: "引擎管理", + title: "实时监控", children:[ { id: "/engine-manager/engines-list", diff --git a/dashboard/src/views/Engines/history-detail.vue b/dashboard/src/views/Engines/history-detail.vue index cf41ecd1f8784756cf71a485cfbdf1188c7ecc0c..3433733d3dc29c1b29de4d6b6b8a65e022f54362 100644 --- a/dashboard/src/views/Engines/history-detail.vue +++ b/dashboard/src/views/Engines/history-detail.vue @@ -106,6 +106,7 @@ export default { selectionClipboard: false, // 选择剪切板 automaticLayout: true, // 自动布局 codeLens: false, // 代码镜头 + tabCompletion: 'on', scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕 colorDecorators: true, // 颜色装饰器 accessibilitySupport: "off", // 辅助功能支持 "auto" | "off" | "on" diff --git a/dashboard/src/views/ReportManager/metrics_detail.vue b/dashboard/src/views/ReportManager/metrics_detail.vue index 3d47718ef1e03df1df69bd488c40a438ccc52d36..6403886a88dc626b8669cae2c2b332d75ccc6c3a 100644 --- a/dashboard/src/views/ReportManager/metrics_detail.vue +++ b/dashboard/src/views/ReportManager/metrics_detail.vue @@ -2,7 +2,7 @@
-