首頁 探索 說明
註冊 登入
zhouyuhuan
/
site-test-tool
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

优化了一些问题

feix0518 1 天之前
父節點
cc1c6e7539
當前提交
53fb7a71e0
共有 3 個文件被更改，包括 83 次插入 和 10 次删除
統一視圖 顯示文件統計
  1. 1 0
      platform/public/index.html
  2. 72 9
      platform/src/Layout.vue
  3. 10 1
      platform/src/Menu.vue

+ 1 - 0
platform/public/index.html
查看文件 

@@ -4,6 +4,7 @@
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <title>未迟站点测试工具</title>
 
   <title>未迟站点测试工具</title>
 
   <link rel="icon" href="/advich.jpg" />
 
   <link rel="icon" href="/advich.jpg" />
 
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
   <div id="app"></div>
 
   <div id="app"></div>

+ 72 - 9
platform/src/Layout.vue
查看文件 

@@ -28,14 +28,22 @@
 
 
 
       <!-- 主体内容 -->
 
       <!-- 主体内容 -->
 
       <main class="content">
 
       <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>
 
       </main>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
@@ -54,8 +62,30 @@ const props = defineProps({
 
 });
 
 });
 
 
 
 const currentUrl = ref('')
 
 const currentUrl = ref('')
 
+const iframeKey = ref(0)
 
+const iframeLoaded = ref(false)
 
+const iframeError = ref(false)
 
+
 
 function updateUrl(newUrl) {
 
 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;
 
   flex: 1;
 
   padding: 20px;
 
   padding: 20px;
 
   overflow-y: auto;
 
   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;
 
 }
 
 }
 
 
 
 /* 浅色主题 */
 
 /* 浅色主题 */

+ 10 - 1
platform/src/Menu.vue
查看文件 

@@ -18,6 +18,7 @@
 
           v-for="child in item.children"
 
           v-for="child in item.children"
 
           :key="child.label"
 
           :key="child.label"
 
           class="sub-menu-item"
 
           class="sub-menu-item"
 
+          :class="{ 'active': activeMenuItem === child }"
 
         >
 
         >
 
           <span v-if="child.icon" class="menu-icon">
 
           <span v-if="child.icon" class="menu-icon">
 
             <i :class="child.icon"></i>
 
             <i :class="child.icon"></i>
 
@@ -42,6 +43,7 @@ const props = defineProps({
 
 // const { props1 } = toRefs(props);
 
 // const { props1 } = toRefs(props);
 
 
 
 const openMenus = ref([]);
 
 const openMenus = ref([]);
 
+const activeMenuItem = ref(null);
 
 
 
 // 切换子菜单展开/收起
 
 // 切换子菜单展开/收起
 
 const toggleSubMenu = (item) => {
 
 const toggleSubMenu = (item) => {
 
@@ -64,7 +66,9 @@ const emit = defineEmits(['update:currentUrl'])
 
 
 
 // 点击菜单项处理
 
 // 点击菜单项处理
 
 const onClickMenuNode = (item) => {
 
 const onClickMenuNode = (item) => {
 
-//   props.currentUrl = item;
 
+  // 设置当前选中的菜单项
 
+  activeMenuItem.value = item;
 
+  // 发送事件到父组件
 
   emit('update:currentUrl', item);
 
   emit('update:currentUrl', item);
 
   console.log("item====",item);
 
   console.log("item====",item);
 
 };
 
 };
 
@@ -123,4 +127,9 @@ toggleSubMenu(props.menuData[0]);
 
 .sub-menu-item:hover {
 
 .sub-menu-item:hover {
 
   background-color: rgba(0, 0, 0, 0.1);
 
   background-color: rgba(0, 0, 0, 0.1);
 
 }
 
 }
 
+
 
+.sub-menu-item.active {
 
+  background-color: rgba(0, 0, 0, 0.15);
 
+  font-weight: bold;
 
+}
 
 </style>
 
 </style>