fix: 静态资源文件路径解析

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'
     ),
   ]);

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)}`;
+}

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,
                 },

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<string, any>[] = nodes.filter(
         (node: Record<string, any>) => {
           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 : {});

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 = {