feat: 内嵌页面

src/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     CodeView: typeof import('./components/code-view/index.vue')['default']
     ExternalLinkPage: typeof import('./components/external-link-page/index.vue')['default']
     FillPage: typeof import('./components/fill-page/index.vue')['default']
+    InternalLinkPage: typeof import('./components/internal-link-page/index.vue')['default']
     LangProvider: typeof import('./components/lang-provider/index.vue')['default']
     MainTransition: typeof import('./components/main-transition/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

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

@@ -1,10 +1,12 @@
 <template>
   <FillPage>
     <div class="external-link-page">
-      <div>
-        <div class="star-emoji">🌍</div>
-        <div class="docs-text">外链页面已经在新窗口中打开</div>
-        <div class="to-page"><a-button type="primary" @click="openPage">立即前往</a-button></div>
+      <div class="external-link-inner-page">
+        <div>
+          <div class="star-emoji">🌍</div>
+          <div class="docs-text">外链页面已经在新窗口中打开</div>
+          <div class="to-page"><a-button type="primary" @click="openPage">立即前往</a-button></div>
+        </div>
       </div>
     </div>
   </FillPage>
@@ -21,22 +23,30 @@ const openPage = () => {
 <style lang="scss" scoped>
 .external-link-page {
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .star-emoji {
-    text-align: center;
-    font-size: 100px;
-  }
-  .docs-text {
-    text-align: center;
-    color: $color-text-3;
-    margin: $margin 0;
-  }
-  .to-page {
-    text-align: center;
+  box-sizing: border-box;
+  padding: $padding;
+
+  .external-link-inner-page {
+    height: 100%;
+    background: $color-bg-1;
+    overflow: hidden;
     display: flex;
+    align-items: center;
     justify-content: center;
+    .star-emoji {
+      text-align: center;
+      font-size: 100px;
+    }
+    .docs-text {
+      text-align: center;
+      color: $color-text-3;
+      margin: $margin 0;
+    }
+    .to-page {
+      text-align: center;
+      display: flex;
+      justify-content: center;
+    }
   }
 }
 </style>

src/components/fill-page/index.vue

@@ -5,9 +5,7 @@
       height: viewportHeight
     }"
   >
-    <div class="fill-page-inner">
-      <slot></slot>
-    </div>
+    <slot></slot>
   </div>
 </template>
 
@@ -26,6 +24,9 @@ const viewportHeight = computed(() => {
   } else if (!isTabs.value && isFooter.value) {
     // 无tabs，有footer
     return `calc(100vh - 60px - 30px)`;
+  } else if (isTabs.value && !isFooter.value) {
+    // 有tabs，无footer
+    return `calc(100vh - 60px - 40px)`;
   } else {
     // 无tabs、无footer，直接减去顶部head
     return `calc(100vh - 60px)`;
@@ -35,14 +36,7 @@ const viewportHeight = computed(() => {
 
 <style lang="scss" scoped>
 .fill-page-size {
-  padding: $padding;
   box-sizing: border-box;
-}
-.fill-page-inner {
-  height: 100%;
-  box-sizing: border-box;
-  padding: $padding;
-  background: $color-bg-1;
-  overflow: hidden;
+  // box-shadow: $shadow-border-1;
 }
 </style>

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

@@ -0,0 +1,23 @@
+<template>
+  <FillPage>
+    <iframe :src="link" class="iframe-size"> </iframe>
+  </FillPage>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const link = ref<string>(route.meta.link as string);
+</script>
+
+<style lang="scss" scoped>
+.iframe-size {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  box-sizing: border-box;
+  position: absolute; // 设置绝对定位，解决边框滚动条显示问题
+}
+</style>

src/lang/modules/enUS.ts

@@ -24,8 +24,15 @@ export default {
     ["userinfo"]: "userinfo",
     ["user-settings"]: "user settings",
     ["external-links"]: "external links",
-    ["link-gitee"]: "link gitee",
-    ["link-juejin"]: "link juejin",
+    ["inline-page"]: "inline page",
+    ["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-gitee"]: "gitee",
+    ["link-juejin"]: "juejin",
     ["about-project"]: "about project",
     ["not-power"]: "No permission",
     ["not-found"]: "Page not found",

src/lang/modules/zhCN.ts

@@ -25,6 +25,13 @@ export default {
     ["user-settings"]: "用户设置",
     ["about-project"]: "关于项目",
     ["external-links"]: "外部链接",
+    ["inline-page"]: "内嵌页面",
+    ["uigradients"]: "渐变配色",
+    ["color-taking-tool"]: "取色工具",
+    ["grid-generator"]: "网格生成器",
+    ["vue-official-website"]: "vue官网",
+    ["vite-official-website"]: "vite官网",
+    ["external-page"]: "外链页面",
     ["link-gitee"]: "外链 gitee",
     ["link-juejin"]: "外链 掘金",
     ["not-power"]: "没有权限",

src/router/route.ts

@@ -291,7 +291,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
       {
         path: "/external-links",
         name: "external-links",
-        redirect: "/external-links/link-gitee",
+        redirect: "/external-links/inline-page",
         meta: {
           title: "external-links",
           hide: false,
@@ -304,36 +304,150 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         },
         children: [
           {
-            path: "/external-links/link-gitee",
-            name: "link-gitee",
-            component: () => import("@/views/external-links/link-gitee/link-gitee.vue"),
+            path: "/external-links/inline-page",
+            name: "inline-page",
+            redirect: "/external-links/inline-page/vue-official-website",
             meta: {
-              title: "link-gitee",
+              title: "inline-page",
               hide: false,
               keepAlive: true,
               affix: false,
-              link: "https://gitee.com/wang_fan_w", // 链接
-              iframe: false, // 区分是否内链 true内链 false外链
+              link: "",
+              iframe: false,
               roles: ["admin"],
               icon: "icon-menu"
             },
-            children: []
+            children: [
+              {
+                path: "/external-links/inline-page/uigradients",
+                name: "uigradients",
+                component: () => import("@/views/external-links/inline-page/inline-page.vue"),
+                meta: {
+                  title: "uigradients",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://uigradients.com/#HoneyDew", // 链接
+                  iframe: true, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu"
+                },
+                children: []
+              },
+              {
+                path: "/external-links/inline-page/color-taking-tool",
+                name: "color-taking-tool",
+                component: () => import("@/views/external-links/inline-page/inline-page.vue"),
+                meta: {
+                  title: "color-taking-tool",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://photokit.com/colors/eyedropper/?lang=zh", // 链接
+                  iframe: true, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu"
+                },
+                children: []
+              },
+              {
+                path: "/external-links/inline-page/grid-generator",
+                name: "grid-generator",
+                component: () => import("@/views/external-links/inline-page/inline-page.vue"),
+                meta: {
+                  title: "grid-generator",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://cssgrid-generator.netlify.app/", // 链接
+                  iframe: true, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  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/link-juejin",
-            name: "link-juejin",
-            component: () => import("@/views/external-links/link-juejin/link-juejin.vue"),
+            path: "/external-links/external-page",
+            name: "external-page",
+            redirect: "/external-links/external-page/link-gitee",
             meta: {
-              title: "link-juejin",
+              title: "external-page",
               hide: false,
               keepAlive: true,
               affix: false,
-              link: "https://juejin.cn/user/1728883023940600", // 链接
-              iframe: false, // 区分是否内链 true内链 false外链
+              link: "",
+              iframe: false,
               roles: ["admin"],
               icon: "icon-menu"
             },
-            children: []
+            children: [
+              {
+                path: "/external-links/external-page/link-gitee",
+                name: "link-gitee",
+                component: () => import("@/views/external-links/external-page/external-page.vue"),
+                meta: {
+                  title: "link-gitee",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://gitee.com/wang_fan_w", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu"
+                },
+                children: []
+              },
+              {
+                path: "/external-links/external-page/link-juejin",
+                name: "link-juejin",
+                component: () => import("@/views/external-links/external-page/external-page.vue"),
+                meta: {
+                  title: "link-juejin",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://juejin.cn/user/1728883023940600", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu"
+                },
+                children: []
+              }
+            ]
           }
         ]
       },

src/views/external-links/inline-page/inline-page.vue

@@ -0,0 +1,3 @@
+<template>
+  <InternalLinkPage />
+</template>

src/views/external-links/link-juejin/link-juejin.vue

@@ -1,3 +0,0 @@
-<template>
-  <ExternalLinkPage />
-</template>

src/views/personal-center/user-settings/components/security-settings.vue

@@ -58,7 +58,7 @@ const rules = {
 
 const onSubmit = ({ errors }: ArcoDesign.ArcoSubmit) => {
   if (errors) return;
-  proxy.$message.success("修改基本信息");
+  proxy.$message.success("修改安全设置");
 };
 </script>