feat(projects): support iframe page with diffrent url of custom route

build/plugins/router.ts

@@ -9,7 +9,18 @@ export function setupElegantRouter() {
       blank: 'src/layouts/blank-layout/index.vue'
     },
     customRoutes: {
-      names: ['exception_403', 'exception_404', 'exception_500']
+      names: [
+        'exception_403',
+        'exception_404',
+        'exception_500',
+        'document_project',
+        'document_project-link',
+        'document_vue',
+        'document_vite',
+        'document_unocss',
+        'document_naive',
+        'document_antd'
+      ]
     },
     routePathTransformer(routeName, routePath) {
       const key = routeName as RouteKey;

eslint.config.js

@@ -7,7 +7,7 @@ export default defineConfig(
       'vue/multi-word-component-names': [
         'warn',
         {
-          ignores: ['index', 'App', '[id]']
+          ignores: ['index', 'App', '[id]', '[url]']
         }
       ],
       'vue/component-name-in-template-casing': [

src/locales/langs/en-us.ts

@@ -137,7 +137,16 @@ const local: App.I18n.Schema = {
     403: 'No Permission',
     404: 'Page Not Found',
     500: 'Server Error',
+    'iframe-page': 'Iframe',
     home: 'Home',
+    document: 'Document',
+    document_project: 'Project Document',
+    'document_project-link': 'Project Document(External Link)',
+    document_vue: 'Vue Document',
+    document_vite: 'Vite Document',
+    document_unocss: 'UnoCSS Document',
+    document_naive: 'Naive UI Document',
+    document_antd: 'Ant Design Vue Document',
     'user-center': 'User Center',
     about: 'About',
     function: 'System Function',

src/locales/langs/zh-cn.ts

@@ -137,7 +137,16 @@ const local: App.I18n.Schema = {
     403: '无权限',
     404: '页面不存在',
     500: '服务器错误',
+    'iframe-page': '外链页面',
     home: '首页',
+    document: '文档',
+    document_project: '项目文档',
+    'document_project-link': '项目文档(外链)',
+    document_vue: 'Vue文档',
+    document_vite: 'Vite文档',
+    document_unocss: 'UnoCSS文档',
+    document_naive: 'Naive UI文档',
+    document_antd: 'Ant Design Vue文档',
     'user-center': '个人中心',
     about: '关于',
     function: '系统功能',

src/router/elegant/imports.ts

@@ -18,6 +18,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   403: () => import("@/views/_builtin/403/index.vue"),
   404: () => import("@/views/_builtin/404/index.vue"),
   500: () => import("@/views/_builtin/500/index.vue"),
+  "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
   about: () => import("@/views/about/index.vue"),
   "function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),

src/router/elegant/routes.ts

@@ -179,6 +179,19 @@ export const generatedRoutes: GeneratedRoute[] = [
       order: 1
     }
   },
+  {
+    name: 'iframe-page',
+    path: '/iframe-page/:url',
+    component: 'layout.base$view.iframe-page',
+    props: true,
+    meta: {
+      title: 'iframe-page',
+      i18nKey: 'route.iframe-page',
+      constant: true,
+      hideInMenu: true,
+      keepAlive: true
+    }
+  },
   {
     name: 'login',
     path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',

src/router/elegant/transform.ts

@@ -147,6 +147,14 @@ const routeMap: RouteMap = {
   "exception_403": "/exception/403",
   "exception_404": "/exception/404",
   "exception_500": "/exception/500",
+  "document": "/document",
+  "document_project": "/document/project",
+  "document_project-link": "/document/project-link",
+  "document_vue": "/document/vue",
+  "document_vite": "/document/vite",
+  "document_unocss": "/document/unocss",
+  "document_naive": "/document/naive",
+  "document_antd": "/document/antd",
   "403": "/403",
   "404": "/404",
   "500": "/500",
@@ -162,6 +170,7 @@ const routeMap: RouteMap = {
   "function_tab": "/function/tab",
   "function_toggle-auth": "/function/toggle-auth",
   "home": "/home",
+  "iframe-page": "/iframe-page/:url",
   "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
   "manage": "/manage",
   "manage_menu": "/manage/menu",

src/router/routes/index.ts

@@ -51,6 +51,115 @@ const customRoutes: CustomRoute[] = [
         }
       }
     ]
+  },
+  {
+    name: 'document',
+    path: '/document',
+    component: 'layout.base',
+    meta: {
+      title: 'document',
+      i18nKey: 'route.document',
+      order: 2,
+      icon: 'mdi:file-document-multiple-outline'
+    },
+    children: [
+      {
+        name: 'document_antd',
+        path: '/document/antd',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://antdv.com/components/overview-cn'
+        },
+        meta: {
+          title: 'document_antd',
+          i18nKey: 'route.document_antd',
+          order: 7,
+          icon: 'logos:ant-design'
+        }
+      },
+      {
+        name: 'document_naive',
+        path: '/document/naive',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://www.naiveui.com/zh-CN/os-theme/docs/introduction'
+        },
+        meta: {
+          title: 'document_naive',
+          i18nKey: 'route.document_naive',
+          order: 6,
+          icon: 'logos:naiveui'
+        }
+      },
+      {
+        name: 'document_project',
+        path: '/document/project',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://docs.soybeanjs.cn/zh'
+        },
+        meta: {
+          title: 'document_project',
+          i18nKey: 'route.document_project',
+          order: 1,
+          localIcon: 'logo'
+        }
+      },
+      {
+        name: 'document_project-link',
+        path: '/document/project-link',
+        component: 'view.iframe-page',
+        meta: {
+          title: 'document_project-link',
+          i18nKey: 'route.document_project-link',
+          order: 2,
+          localIcon: 'logo',
+          href: 'https://docs.soybeanjs.cn/zh'
+        }
+      },
+      {
+        name: 'document_unocss',
+        path: '/document/unocss',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://unocss.dev/'
+        },
+        meta: {
+          title: 'document_unocss',
+          i18nKey: 'route.document_unocss',
+          order: 5,
+          icon: 'logos:unocss'
+        }
+      },
+      {
+        name: 'document_vite',
+        path: '/document/vite',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://cn.vitejs.dev/'
+        },
+        meta: {
+          title: 'document_vite',
+          i18nKey: 'route.document_vite',
+          order: 4,
+          icon: 'logos:vitejs'
+        }
+      },
+      {
+        name: 'document_vue',
+        path: '/document/vue',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://cn.vuejs.org/'
+        },
+        meta: {
+          title: 'document_vue',
+          i18nKey: 'route.document_vue',
+          order: 3,
+          icon: 'logos:vue'
+        }
+      }
+    ]
   }
 ];
 

src/typings/elegant-router.d.ts

@@ -21,6 +21,14 @@ declare module "@elegant-router/types" {
     "exception_403": "/exception/403";
     "exception_404": "/exception/404";
     "exception_500": "/exception/500";
+    "document": "/document";
+    "document_project": "/document/project";
+    "document_project-link": "/document/project-link";
+    "document_vue": "/document/vue";
+    "document_vite": "/document/vite";
+    "document_unocss": "/document/unocss";
+    "document_naive": "/document/naive";
+    "document_antd": "/document/antd";
     "403": "/403";
     "404": "/404";
     "500": "/500";
@@ -36,6 +44,7 @@ declare module "@elegant-router/types" {
     "function_tab": "/function/tab";
     "function_toggle-auth": "/function/toggle-auth";
     "home": "/home";
+    "iframe-page": "/iframe-page/:url";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
     "manage": "/manage";
     "manage_menu": "/manage/menu";
@@ -72,6 +81,14 @@ declare module "@elegant-router/types" {
     | "exception_403"
     | "exception_404"
     | "exception_500"
+    | "document"
+    | "document_project"
+    | "document_project-link"
+    | "document_vue"
+    | "document_vite"
+    | "document_unocss"
+    | "document_naive"
+    | "document_antd"
   >;
 
   /**
@@ -90,6 +107,7 @@ declare module "@elegant-router/types" {
     | "about"
     | "function"
     | "home"
+    | "iframe-page"
     | "login"
     | "manage"
     | "multi-menu"
@@ -104,6 +122,7 @@ declare module "@elegant-router/types" {
     | "root"
     | "not-found"
     | "exception"
+    | "document"
   >;
 
   /**
@@ -114,6 +133,7 @@ declare module "@elegant-router/types" {
     | "403"
     | "404"
     | "500"
+    | "iframe-page"
     | "login"
     | "about"
     | "function_hide-child_one"
@@ -144,6 +164,13 @@ declare module "@elegant-router/types" {
     | "exception_403"
     | "exception_404"
     | "exception_500"
+    | "document_project"
+    | "document_project-link"
+    | "document_vue"
+    | "document_vite"
+    | "document_unocss"
+    | "document_naive"
+    | "document_antd"
   >;
 
   /**

src/views/_builtin/iframe-page/[url].vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { onActivated, onMounted } from 'vue';
+
+interface Props {
+  url: string;
+}
+
+defineProps<Props>();
+
+onMounted(() => {
+  console.log('mounted');
+});
+
+onActivated(() => {
+  console.log('activated');
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <iframe id="iframePage" class="size-full" :src="url"></iframe>
+  </div>
+</template>
+
+<style scoped></style>