feat: 内链页面的加载逻辑优化

src/components/internal-link-page/index.vue

@@ -1,6 +1,9 @@
 <template>
   <FillPage>
-    <iframe :src="link" class="iframe-size"> </iframe>
+    <div v-if="!isLoading" class="loading-page">
+      <div class="dc-loader"></div>
+    </div>
+    <iframe v-show="isLoading" :src="link" class="iframe-size" id="internalLinkPage"> </iframe>
   </FillPage>
 </template>
 
@@ -10,6 +13,17 @@ import { useRoute } from "vue-router";
 const route = useRoute();
 
 const link = ref<string>(route.meta.link as string);
+
+const isLoading = ref(false); // iframe是否加载完成
+onMounted(() => {
+  let iframe = document.getElementById("internalLinkPage") as HTMLElement;
+  if (iframe) {
+    // 加载完成
+    iframe.onload = () => {
+      isLoading.value = true;
+    };
+  }
+});
 </script>
 
 <style lang="scss" scoped>

src/lang/modules/enUS.ts

@@ -30,9 +30,9 @@ export default {
     ["uigradients"]: "uigradients",
     ["color-taking-tool"]: "color taking tool",
     ["grid-generator"]: "grid generator",
-    ["vue-official-website"]: "vue",
-    ["vite-official-website"]: "vite",
     ["external-page"]: "external link page",
+    ["link-vue"]: "vue",
+    ["link-vite"]: "vite",
     ["link-gitee"]: "gitee",
     ["link-juejin"]: "juejin",
     ["about-project"]: "about project",

src/lang/modules/zhCN.ts

@@ -31,9 +31,9 @@ export default {
     ["uigradients"]: "渐变配色",
     ["color-taking-tool"]: "取色工具",
     ["grid-generator"]: "网格生成器",
-    ["vue-official-website"]: "vue官网",
-    ["vite-official-website"]: "vite官网",
     ["external-page"]: "外链页面",
+    ["link-vue"]: "外链 vue官网",
+    ["link-vite"]: "外链 vite官网",
     ["link-gitee"]: "外链 gitee",
     ["link-juejin"]: "外链 掘金",
     ["not-power"]: "没有权限",

src/router/route.ts

@@ -398,45 +398,13 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                   icon: "icon-menu"
                 },
                 children: []
-              },
-              {
-                path: "/external-links/inline-page/vue-official-website",
-                name: "vue-official-website",
-                component: () => import("@/views/external-links/inline-page/inline-page.vue"),
-                meta: {
-                  title: "vue-official-website",
-                  hide: false,
-                  keepAlive: true,
-                  affix: false,
-                  link: "https://cn.vuejs.org/", // 链接
-                  iframe: true, // 区分是否内链 true内链 false外链
-                  roles: ["admin"],
-                  icon: "icon-menu"
-                },
-                children: []
-              },
-              {
-                path: "/external-links/inline-page/vite-official-website",
-                name: "vite-official-website",
-                component: () => import("@/views/external-links/inline-page/inline-page.vue"),
-                meta: {
-                  title: "vite-official-website",
-                  hide: false,
-                  keepAlive: true,
-                  affix: false,
-                  link: "https://www.vitejs.net/", // 链接
-                  iframe: true, // 区分是否内链 true内链 false外链
-                  roles: ["admin"],
-                  icon: "icon-menu"
-                },
-                children: []
               }
             ]
           },
           {
             path: "/external-links/external-page",
             name: "external-page",
-            redirect: "/external-links/external-page/link-gitee",
+            redirect: "/external-links/external-page/link-vue",
             meta: {
               title: "external-page",
               hide: false,
@@ -448,6 +416,38 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               icon: "icon-menu"
             },
             children: [
+              {
+                path: "/external-links/external-page/link-vue",
+                name: "link-vue",
+                component: () => import("@/views/external-links/external-page/external-page.vue"),
+                meta: {
+                  title: "link-vue",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://cn.vuejs.org/", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu"
+                },
+                children: []
+              },
+              {
+                path: "/external-links/external-page/link-vite",
+                name: "link-vite",
+                component: () => import("@/views/external-links/external-page/external-page.vue"),
+                meta: {
+                  title: "link-vite",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://www.vitejs.net/", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu"
+                },
+                children: []
+              },
               {
                 path: "/external-links/external-page/link-gitee",
                 name: "link-gitee",