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,12 +1,14 @@
 <template>
   <FillPage>
     <div class="external-link-page">
+      <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>
 </template>
 
@@ -21,6 +23,13 @@ const openPage = () => {
 <style lang="scss" scoped>
 .external-link-page {
   height: 100%;
+  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;
@@ -38,5 +47,6 @@ const openPage = () => {
       display: flex;
       justify-content: center;
     }
+  }
 }
 </style>

src/components/fill-page/index.vue

@@ -5,10 +5,8 @@
       height: viewportHeight
     }"
   >
-    <div class="fill-page-inner">
     <slot></slot>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -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,9 +304,121 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         },
         children: [
           {
-            path: "/external-links/link-gitee",
+            path: "/external-links/inline-page",
+            name: "inline-page",
+            redirect: "/external-links/inline-page/vue-official-website",
+            meta: {
+              title: "inline-page",
+              hide: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu"
+            },
+            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/external-page",
+            name: "external-page",
+            redirect: "/external-links/external-page/link-gitee",
+            meta: {
+              title: "external-page",
+              hide: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu"
+            },
+            children: [
+              {
+                path: "/external-links/external-page/link-gitee",
                 name: "link-gitee",
-            component: () => import("@/views/external-links/link-gitee/link-gitee.vue"),
+                component: () => import("@/views/external-links/external-page/external-page.vue"),
                 meta: {
                   title: "link-gitee",
                   hide: false,
@@ -320,9 +432,9 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 children: []
               },
               {
-            path: "/external-links/link-juejin",
+                path: "/external-links/external-page/link-juejin",
                 name: "link-juejin",
-            component: () => import("@/views/external-links/link-juejin/link-juejin.vue"),
+                component: () => import("@/views/external-links/external-page/external-page.vue"),
                 meta: {
                   title: "link-juejin",
                   hide: false,
@@ -336,6 +448,8 @@ export const dynamicRoutes: RouteRecordRaw[] = [
                 children: []
               }
             ]
+          }
+        ]
       },
       {
         path: "/internationalization",

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>