feat(projects): 新增 iframe 模式

src/layouts/iframe-layout/index.vue

@@ -0,0 +1,80 @@
+<template>
+ <admin-layout
+ :mode="mode"
+ :scroll-mode="theme.scrollMode"
+ :scroll-el-id="app.scrollElId"
+ :full-content="app.contentFull"
+ :fixed-top="theme.fixedHeaderAndTab"
+ :header-height="theme.header.height"
+ :tab-visible="false"
+ :tab-height="theme.tab.height"
+ :content-class="app.disableMainXScroll ? 'overflow-x-hidden' : ''"
+ :sider-visible="siderVisible"
+ :sider-collapse="app.siderCollapse"
+ :sider-width="siderWidth"
+ :sider-collapsed-width="siderCollapsedWidth"
+ :footer-visible="theme.footer.visible"
+ :fixed-footer="theme.footer.fixed"
+ :right-footer="theme.footer.right"
+ :breadcrumb-visible="false"
+ :breadcrumb-height="50"
+ >
+ <template #header>
+ <global-header v-bind="headerProps" />
+ </template>
+ <template #breadcrumb>
+ <global-breadcrumb />
+ </template>
+ <template #tab>
+ <global-tab />
+ </template>
+ <template #sider>
+ <global-sider />
+ </template>
+ <div class="h-full">
+ <iframe class="wh-full" :src="src"></iframe>
+ </div>
+ <template #footer>
+ <global-footer />
+ </template>
+ </admin-layout>
+ <n-back-top :key="theme.scrollMode" :listen-to="`#${app.scrollElId}`" class="z-100" />
+ <setting-drawer />
+</template>
+
+<script setup lang="ts">
+// import { AdminLayout } from '@soybeanjs/vue-materials';
+import { ref } from 'vue';
+// import { useRoute } from 'vue-router';
+import { useAppStore, useThemeStore } from '@/store';
+import { useBasicLayout } from '@/composables';
+import {
+ GlobalFooter,
+ GlobalHeader,
+ GlobalSider,
+ GlobalTab,
+ SettingDrawer,
+ AdminLayout,
+ GlobalBreadcrumb
+} from '../common';
+
+defineOptions({ name: 'IFrameLayout' });
+
+const app = useAppStore();
+const theme = useThemeStore();
+
+const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
+// const route = useRoute();
+// debugger;
+const src = ref('');
+</script>
+
+<style lang="scss">
+#__SCROLL_EL_ID__ {
+ @include scrollbar(8px, #e1e1e1);
+}
+
+.dark #__SCROLL_EL_ID__ {
+ @include scrollbar(8px, #555);
+}
+</style>

src/layouts/index.ts

@@ -1,4 +1,5 @@
 const BasicLayout = () => import('./basic-layout/index.vue');
 const BlankLayout = () => import('./blank-layout/index.vue');
+const IFrameLayout = () => import('./iframe-layout/index.vue');
 
-export { BasicLayout, BlankLayout };
+export { BasicLayout, BlankLayout, IFrameLayout };

src/router/guard/permission.ts

@@ -15,7 +15,8 @@ export async function createPermissionGuard(
  if (!permission) return;
 
  // 外链路由, 从新标签打开，返回上一个路由
- if (to.meta.href) {
+ // singleLayout == 'iframe' 站内打开。
+ if (to.meta.href && to.meta.singleLayout !== 'iframe') {
  window.open(to.meta.href);
  next({ path: from.fullPath, replace: true, query: from.query });
  return;

src/router/modules/about.ts

@@ -1,12 +1,13 @@
 const about1: AuthRoute.Route = {
  name: 'about',
  path: '/about',
- component: 'self',
+ component: 'iframe',
  meta: {
  title: '关于',
  requiresAuth: true,
  keepAlive: true,
- singleLayout: 'basic',
+ singleLayout: 'iframe',
+ href: 'https://docs.soybean.pro/',
  permissions: ['super', 'admin', 'user'],
  icon: 'fluent:book-information-24-regular',
  order: 10,

src/typings/route.d.ts

@@ -25,7 +25,7 @@ declare namespace AuthRoute {
  * - multi - 多级路由布局(三级路由或三级以上时，除第一级路由和最后一级路由，其余的采用该布局)
  * - self - 作为子路由，使用自身的布局(作为最后一级路由，没有子路由)
  */
- type RouteComponentType = 'basic' | 'blank' | 'multi' | 'self';
+ type RouteComponentType = 'basic' | 'blank' | 'multi' | 'self'| 'iframe';
 
  /** 路由描述 */
  interface RouteMeta<K extends AuthRoute.RoutePath> {
@@ -34,7 +34,7 @@ declare namespace AuthRoute {
  /** 路由的动态路径(需要动态路径的页面需要将path添加进范型参数) */
  dynamicPath?: AuthRouteUtils.GetDynamicPath<K>;
  /** 作为单级路由的父级路由布局组件 */
- singleLayout?: Extract<RouteComponentType, 'basic' | 'blank'>;
+ singleLayout?: Extract<RouteComponentType, 'basic' | 'blank' | 'iframe'>;
  /** 需要登录权限 */
  requiresAuth?: boolean;
  /**

src/typings/union-key.d.ts

@@ -6,8 +6,9 @@ declare namespace UnionKey {
  * 布局组件的名称
  * - basic 基础布局
  * - blank 空白布局
+ * - iframe 布局
  */
- type LayoutComponentType = 'basic' | 'blank';
+ type LayoutComponentType = 'basic' | 'blank' | 'iframe';
 
  /**
  * 登录模块

src/utils/router/component.ts

@@ -1,5 +1,5 @@
 import type { RouteComponent } from 'vue-router';
-import { BasicLayout, BlankLayout } from '@/layouts';
+import { BasicLayout, BlankLayout, IFrameLayout } from '@/layouts';
 import { views } from '@/views';
 import { isFunction } from '../common';
 
@@ -18,7 +18,8 @@ type LayoutComponent = Record<UnionKey.LayoutComponentType, Lazy<ModuleComponent
 export function getLayoutComponent(layoutType: UnionKey.LayoutComponentType) {
  const layoutComponent: LayoutComponent = {
  basic: BasicLayout,
- blank: BlankLayout
+ blank: BlankLayout,
+ iframe: IFrameLayout
  };
  return layoutComponent[layoutType];
 }

src/utils/router/transform.ts

@@ -51,6 +51,9 @@ export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
  },
  self() {
  itemRoute.component = getViewComponent(item.name as AuthRoute.LastDegreeRouteKey);
+ },
+ iframe() {
+ itemRoute.component = getLayoutComponent('iframe');
  }
  };
  try {