|
|
@@ -28,14 +28,22 @@
|
|
|
|
|
|
<!-- 主体内容 -->
|
|
|
<main class="content">
|
|
|
- <iframe
|
|
|
- v-show="currentUrl"
|
|
|
- :src="currentUrl"
|
|
|
- frameborder="0"
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- ></iframe>
|
|
|
- <div v-show="!currentUrl" style="text-align: center;"><h1>【请选择测试节点】</h1></div>
|
|
|
+ <div class="iframe-wrapper" v-show="currentUrl">
|
|
|
+ <div v-if="!iframeLoaded && !iframeError" class="loading">页面加载中...</div>
|
|
|
+ <div v-if="iframeError" class="error">页面加载失败，请稍后重试</div>
|
|
|
+ <iframe
|
|
|
+ :key="iframeKey"
|
|
|
+ :src="currentUrl"
|
|
|
+ frameborder="0"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ @load="onIframeLoad"
|
|
|
+ @error="onIframeError"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ <div v-show="!currentUrl" class="placeholder">
|
|
|
+ <h1>【请选择测试节点】</h1>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -54,8 +62,30 @@ const props = defineProps({
|
|
|
});
|
|
|
|
|
|
const currentUrl = ref('')
|
|
|
+const iframeKey = ref(0)
|
|
|
+const iframeLoaded = ref(false)
|
|
|
+const iframeError = ref(false)
|
|
|
+
|
|
|
function updateUrl(newUrl) {
|
|
|
- currentUrl.value = newUrl.value + "?name=" + newUrl.label;
|
|
|
+ // 重置状态
|
|
|
+ iframeLoaded.value = false;
|
|
|
+ iframeError.value = false;
|
|
|
+
|
|
|
+ // 更新URL时强制刷新iframe
|
|
|
+ currentUrl.value = newUrl.value + "?name=" + newUrl.label;
|
|
|
+ iframeKey.value += 1;
|
|
|
+}
|
|
|
+
|
|
|
+// iframe加载完成事件
|
|
|
+function onIframeLoad() {
|
|
|
+ iframeLoaded.value = true;
|
|
|
+ iframeError.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+// iframe加载错误事件
|
|
|
+function onIframeError() {
|
|
|
+ iframeLoaded.value = false;
|
|
|
+ iframeError.value = true;
|
|
|
}
|
|
|
|
|
|
// 顶部菜单数据
|
|
|
@@ -155,6 +185,39 @@ const leftMenuData = ref([
|
|
|
flex: 1;
|
|
|
padding: 20px;
|
|
|
overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.iframe-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.placeholder {
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.loading, .error {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 1;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.9);
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.error {
|
|
|
+ color: #e74c3c;
|
|
|
}
|
|
|
|
|
|
/* 浅色主题 */
|
feix0518