feat: 新增数据库监控页面

src/layout/frameView.vue

@@ -10,9 +10,14 @@ const loading = ref(true);
 const currentRoute = useRoute();
 const frameSrc = ref<string>("");
 const frameRef = ref<HTMLElement | null>(null);
+const { VITE_APP_BASE_API } = import.meta.env;
 
 if (unref(currentRoute.meta)?.frameSrc) {
   frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
+  // 如果是内部链接的话， 需要加上后端服务器地址前缀
+  if (unref(currentRoute.meta).isFrameSrcInternal) {
+    frameSrc.value = `${VITE_APP_BASE_API}${frameSrc.value}`;
+  }
 }
 unref(currentRoute.meta)?.frameLoading === false && hideLoading();
 

types/router.d.ts

@@ -29,6 +29,10 @@ declare global {
     keepAlive?: boolean;
     /** 内嵌的`iframe`链接 `可选` */
     frameSrc?: string;
+    /** 是否是内部页面   使用frameSrc来嵌入页面时，当isFrameSrcInternal=true的时候, 前端需要做特殊处理  */
+    /** 比如链接是 /druid/login.html */
+    /** 前端需要处理成 http://localhost:8080/druid/login.html */
+    isFrameSrcInternal?: boolean;
     /** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
     frameLoading?: boolean;
     /** 页面加载动画（有两种形式，一种直接采用vue内置的`transitions`动画，另一种是使用`animate.css`写进、离场动画）`可选` */