diff --git a/public/wiregasm/worker.js b/public/wiregasm/worker.js index 74baa7e5..8d6b9b4f 100644 --- a/public/wiregasm/worker.js +++ b/public/wiregasm/worker.js @@ -1,7 +1,7 @@ // load the Wiregasm library importScripts( - '/wiregasm/wiregasm_new.js', // self-compilation es5 - '/wiregasm/wiregasm_load.js' + 'wiregasm_new.js', // self-compilation es5 + 'wiregasm_load.js' // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.js' ); @@ -16,11 +16,11 @@ const fetchPackages = async () => { console.log('Fetching packages'); let [wasmBuffer, dataBuffer] = await Promise.all([ await inflateRemoteBuffer( - '/wiregasm/wiregasm.wasm' + 'wiregasm.wasm' // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.wasm' ), await inflateRemoteBuffer( - '/wiregasm/wiregasm.data' + 'wiregasm.data' // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.data' ), ]); diff --git a/src/plugins/file-static-url.ts b/src/plugins/file-static-url.ts index f0d1e275..4dfcfbfb 100644 --- a/src/plugins/file-static-url.ts +++ b/src/plugins/file-static-url.ts @@ -19,3 +19,26 @@ export function parseUrlPath(path: string) { : import.meta.env.VITE_API_BASE_URL; return `${baseUrl}${path}?r=${Math.random().toFixed(2)}`; } + +/** + * 解析静态文件相对路径 + * @param path 静态资源文件 + * @returns + */ +export function parseBasePath(path: string) { + if (!path || path === '#') { + return '#'; + } + if (validHttp(path)) { + return path; + } + // 兼容旧前端可改配置文件 + const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL; + let scriptUrl = + baseUrl.length === 1 && baseUrl.indexOf('/') === 0 + ? '' + : baseUrl.indexOf('/') === -1 + ? '/' + baseUrl + : baseUrl; + return `${scriptUrl}${path}?r=${Math.random().toFixed(2)}`; +} diff --git a/src/views/monitor/topology/index.vue b/src/views/monitor/topology/index.vue index 7080c1b5..c3cf9026 100644 --- a/src/views/monitor/topology/index.vue +++ b/src/views/monitor/topology/index.vue @@ -7,6 +7,7 @@ import { listAllNeInfo, stateNeInfo } from '@/api/ne/neInfo'; import { message } from 'ant-design-vue/es'; import { randerGroph, switchLayout } from './graph'; import { parseDateToStr } from '@/utils/date-utils'; +import { parseBasePath } from '@/plugins/file-static-url'; const { t } = useI18n(); /**图DOM节点实例对象 */ @@ -87,7 +88,7 @@ function fnGetList(refresh: boolean = false) { x: -30, y: -30, // 可更换为其他图片地址 - img: '/svg/service_db.svg', + img: parseBasePath('/svg/service_db.svg'), width: 60, height: 60, }, @@ -102,7 +103,7 @@ function fnGetList(refresh: boolean = false) { icon: { x: -24, y: -24, - img: '/svg/service.svg', + img: parseBasePath('/svg/service.svg'), width: 48, height: 48, }, diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue index 049dcb2e..a5ee3889 100644 --- a/src/views/monitor/topologyArchitecture/index.vue +++ b/src/views/monitor/topologyArchitecture/index.vue @@ -24,6 +24,7 @@ import { import useNeOptions from '@/views/ne/neInfo/hooks/useNeOptions'; import useI18n from '@/hooks/useI18n'; import { OptionsType, WS } from '@/plugins/ws-websocket'; +import { parseBasePath } from '@/plugins/file-static-url'; const { t } = useI18n(); const { fnNeRestart, fnNeStop, fnNeLogFile } = useNeOptions(); const ws = new WS(); @@ -291,6 +292,10 @@ function fnGraphDataLoad(reload: boolean = false) { const nf: Record[] = nodes.filter( (node: Record) => { Reflect.set(node, 'neState', { online: false }); + // 图片路径处理 + if (node.img) node.img = parseBasePath(node.img); + if (node.icon.show && node.icon?.img) node.icon.img = parseBasePath(node.icon.img); + // 遍历是否有网元数据 const nodeID: string = node.id; const hasNe = res.neList.some(ne => { Reflect.set(node, 'neInfo', ne.neType === nodeID ? ne : {}); diff --git a/src/views/traceManage/tshark/hooks/usePCAP.ts b/src/views/traceManage/tshark/hooks/usePCAP.ts index 83e9b490..36eeb0a1 100644 --- a/src/views/traceManage/tshark/hooks/usePCAP.ts +++ b/src/views/traceManage/tshark/hooks/usePCAP.ts @@ -1,6 +1,7 @@ import { onBeforeUnmount, onMounted, reactive } from 'vue'; import { scriptUrl } from '@/assets/js/wiregasm_worker'; import { WK, OptionsType } from '@/plugins/wk-worker'; +import { parseBasePath } from '@/plugins/file-static-url'; const wk = new WK(); export const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 }; @@ -201,7 +202,7 @@ export function usePCAP() { /**本地示例文件 */ async function handleLoadExample() { const name = 'test_ethernet.pcap'; - const res = await fetch('/wiregasm/test_ethernet.pcap'); + const res = await fetch(parseBasePath('/wiregasm/test_ethernet.pcap')); const body = await res.arrayBuffer(); state.summary = {