feat(projects): support iframe page with diffrent url of custom route
This commit is contained in:
parent
1c3b4734fa
commit
da12d4a5cd
@ -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;
|
||||
|
@ -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': [
|
||||
|
@ -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',
|
||||
|
@ -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: '系统功能',
|
||||
|
@ -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"),
|
||||
|
@ -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)?',
|
||||
|
@ -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",
|
||||
|
@ -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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
27
src/typings/elegant-router.d.ts
vendored
27
src/typings/elegant-router.d.ts
vendored
@ -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"
|
||||
>;
|
||||
|
||||
/**
|
||||
|
25
src/views/_builtin/iframe-page/[url].vue
Normal file
25
src/views/_builtin/iframe-page/[url].vue
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user