数据分析嵌入，把危险功能遮罩了，自适应遮罩高度，防止漏边

src/views/analy/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="iframe-container" ref="container">
+    <div class="overlay" :style="{ height: overlayHeight }" ></div>
+    <IFrame ref="ifr" :src="src" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import * as ConfigApi from '@/api/infra/config';
+
+const container = ref<HTMLElement | null>(null);
+const overlayHeight = ref<String>('8%'); // 初始遮罩高度
+
+// 监听容器大小变化
+useResizeObserver(container, () => {
+  updateOverlayHeight(); // 在容器大小变化时更新遮罩高度
+});
+
+const updateOverlayHeight = () => {
+  if (container.value) {
+    const containerHeight = container.value.clientHeight;
+    if(containerHeight > 700){
+      overlayHeight.value = `${containerHeight / 13}px`; // 或者根据需要计算高度百分比
+    }else if(containerHeight <= 700){
+      overlayHeight.value = `${containerHeight / 10}px`; // 或者根据需要计算高度百分比
+    }
+  }
+};
+
+
+defineOptions({ name: 'Analysis' });
+let src = ref('')
+const ifr = ref(null); // 初始化
+
+
+onMounted(async () => {
+  const url = await ConfigApi.getConfigKey('jupyter.url')
+  src.value =  url + '?cb=' + new Date().getTime();
+  updateOverlayHeight(); // 初始化时更新遮罩高度
+})
+
+</script>
+
+<style scoped>
+.iframe-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 1); /* 半透明黑色背景 */
+  z-index: 10; /* 确保遮罩在 iframe 上方 */
+}
+</style>