feat: 🚀 外链页面修改

src/layout/BreadCrumbs/BreadCrumbs.vue

@@ -10,7 +10,8 @@ import { routerHelper } from '@/router/helps/allRouters'
 import { layoutProvide } from '@/store/modules/useLayoutStore'
 
 const { allRouters } = routerHelper()
-const { isHeaderHeight, isContentPadding } = inject(layoutProvide)!
+const { isHeaderHeight, isContentPadding, isSupported } = inject(layoutProvide)!
+console.log(isSupported, 99)
 const route = useRoute()
 const allBreadcrumb = ref(createBreadcrumb(toValue(allRouters)))
 const breadcrumb = computed(() => {
@@ -32,7 +33,7 @@ useAutoAnimate({
     } as CSSProperties"
   >
     <Collaps />
-    <FullScreen />
+    <FullScreen v-if="isSupported" />
     <Dark />
     <Refresh />
     <NBreadcrumb ref="breadcrumbRef">

src/layout/HKeepAlive/HKeepAlive.vue

@@ -1,31 +1,61 @@
 <script lang="ts" setup>
-import { inject } from 'vue'
+import  { inject } from 'vue'
 import { useKeepAliveCacheStore } from '@/layout/HKeepAlive/useKeepAliveCacheStore'
 
-const { isRefreshPage } = inject(layoutProvide)!
+const { isRefreshPage, isHeaderHeight, isTagViewHeight, isContentPadding, isFooterHeight  } = inject(layoutProvide)!
 const cacheStore = useKeepAliveCacheStore()
 const { exclude } = storeToRefs(cacheStore)
+const topAttribute = computed(()=>{
+  return `${isHeaderHeight.value + isTagViewHeight.value}px`
+})
+const bottomAttribute = computed(()=>{
+  return `${isFooterHeight.value + isContentPadding.value}px`
+})
+const paddingAttribute = computed(()=>{
+  return `${isContentPadding.value}px`
+})
 </script>
 
 <template>
-  <RouterView v-slot="{ Component, route }">
+  <RouterView
+    v-slot="{
+      Component, route: {
+        fullPath,
+        name,
+        meta: {
+          isIframe,
+        },
+      },
+    }"
+  >
     <Transition
       appear
-      enterActiveClass="animated-fade-in-left animated animated-duration-300 ease-in-out"
-      leaveActiveClass="animated-fade-out-right animated animated-duration-300 ease-in-out"
-      mode="out-in"
+      enterActiveClass="animated-fade-in-left animated animated-duration-300 ease-in-out !absolute absolute_orientation_keepAlive"
+      leaveActiveClass="animated-fade-out-right animated animated-duration-300 ease-in-out !absolute absolute_orientation_keepAlive"
     >
-      <KeepAlive
-        :exclude="exclude"
-        :max="2"
-      >
-        <component
+      <KeepAlive :exclude="exclude">
+        <Component
           :is="Component"
           v-if="isRefreshPage"
-          :key="route.fullPath"
+          v-show="isIframe !== true"
+          :key="fullPath"
           class="flex-1 overflow-hidden"
         />
       </KeepAlive>
     </Transition>
+    <!-- eslint-disable-next-line vue/valid-v-for -->
+    <IframKeep
+      :isIframe="isIframe"
+      :routeName="name"
+    />
   </RouterView>
 </template>
+
+<style scoped>
+.absolute_orientation_keepAlive{
+  top:v-bind(topAttribute);
+  bottom:v-bind(bottomAttribute);
+  left:v-bind(paddingAttribute);
+  right:v-bind(paddingAttribute);
+}
+</style>

src/layout/HKeepAlive/IframKeep.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { forEach, isFunction, isString, some } from 'lodash-es'
+import type { Component } from 'vue'
+import { inject } from 'vue'
+import type { RouteRecordName } from 'vue-router'
+import { useKeepAliveCacheStore } from '@/layout/HKeepAlive/useKeepAliveCacheStore'
+import { routerHelper } from '@/router/helps/allRouters'
+
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps<{
+  routeName?: RouteRecordName | null
+  isIframe?: boolean
+}>()
+
+const {  isRefreshPage, isHeaderHeight, isTagViewHeight, isContentPadding, isFooterHeight } = inject(layoutProvide)!
+
+const {  allIframeRouters } = routerHelper()
+const topAttribute = computed(()=>{
+  return `${isHeaderHeight.value + isTagViewHeight.value}px`
+})
+const bottomAttribute = computed(()=>{
+  return `${isFooterHeight.value + isContentPadding.value}px`
+})
+const paddingAttribute = computed(()=>{
+  return `${isContentPadding.value}px`
+})
+async function getComponent(name?: string | RouteRecordName) {
+  const { component } = allIframeRouters.value.find(item => item.name === name)!
+  if (isFunction(component)) {
+    const result = await (component as () => Promise<{
+      default: Component
+    }>)()
+    return result.default
+  }
+}
+const demoCom = shallowRef<{
+  component: any
+  name?: string | RouteRecordName
+}[]>([])
+onMounted(()=>{
+  forEach(allIframeRouters.value, async (item) => {
+    const { name } = item
+    const component = await getComponent(name)
+    demoCom.value.push({
+      component,
+      name,
+    })
+    triggerRef(demoCom)
+  })
+})
+const cacheStore = useKeepAliveCacheStore()
+const { exclude } = storeToRefs(cacheStore)
+function isVif(name?: RouteRecordName | null) {
+  return props.routeName === name ?
+      !some(exclude.value, item => item.test(isString(name) ? name : ''))
+      && isRefreshPage.value : true
+}
+function isVshow(name?: RouteRecordName | null) {
+  return props.routeName === name && props.isIframe
+}
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/valid-v-for -->
+  <Transition
+    v-for="{ name, component } in demoCom"
+    appear
+    enterActiveClass="animated-fade-in-left animated animated-duration-300 ease-in-out absolute absolute_orientation"
+    leaveActiveClass="animated-fade-out-right animated animated-duration-300 ease-in-out absolute absolute_orientation"
+  >
+    <div
+      v-if="isVif(name)"
+      v-show="isVshow(name)"
+      :key="name"
+      class="flex flex-1 flex-col"
+    >
+      <Component
+        :is="component"
+        :key="name"
+        class="flex-1 overflow-hidden"
+      />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.absolute_orientation{
+  top:v-bind(topAttribute);
+  bottom:v-bind(bottomAttribute);
+  left:v-bind(paddingAttribute);
+  right:v-bind(paddingAttribute);
+}
+</style>

src/router/RouteRecordRaw.d.ts

@@ -5,34 +5,39 @@ declare module 'vue-router' {
   interface RouteMeta {
     /** 路由标题 */
     isTitle: string
-    /** 是否改变网页标题
+    /**
+     * 是否改变网页标题
      * @default true
-     * */
-    changeTitle?: false
-    /** 菜单顺序,同层比较
+     */
+    changeTitle?: boolean
+    /**
+     * 菜单顺序,同层比较
      * @default 0
-     * */
+     */
     isOrder?: number
     /** 图标名称 */
     lineIcon?: string
     /** 本地图标名称 */
     localIcon?: string
-    /** 是否是固定页，默认不固定
+    /**
+     * 是否是固定页，默认不固定
      * @default undefined
-     * */
+     */
     isAffix?: true
-    /** 是否隐藏在菜单,面包屑中隐藏，默认不隐藏
+    /**
+     * 是否隐藏在菜单,面包屑中隐藏，默认不隐藏
      * @default undefined
-     **/
+     */
     isHidden?: true
-    /** 是否缓存,默认缓存
+    /**
+     * 是否缓存,默认缓存
      * @default undefined
-     * */
+     */
     isKeepAlive?: false
-    /** 是否是tag页，默认不是
+    /**
+     * isIframe: 是否是iframe，默认不是
      * @default undefined
-     * */
-    isTag?: false
+     */
+    isIframe?: true
   }
 }
-

src/router/helps/allRouters.ts

@@ -81,23 +81,40 @@ function deepCreateMeta(routerList: MaybeRef<RouteRecordRaw[]>) {
   })
   return result
 }
+function deepCreateIframe(routerList: MaybeRef<RouteRecordRaw[]>) {
+  const result: RouteRecordRaw[] = []
+  const deepFilter = (routes: RouteRecordRaw[]) => {
+    forEach(routes, (item) => {
+      if (item.meta?.isIframe)
+        result.push(item)
+
+      if (item.children)
+        deepFilter(item.children)
+    })
+  }
+  deepFilter(unref(routerList))
+  return result
+}
 
 const allRouters = shallowRef<RouteRecordRaw[]>([])
 const allAffixRouters = shallowRef<RouteRecordRaw[]>([])
 const allUnKeepAliveRouters = shallowRef<RouteRecordRaw[]>([])
+const allIframeRouters = shallowRef<RouteRecordRaw[]>([])
 export function routerHelper() {
   const createRouterHelper = (list: MaybeRef<RouteRecordRaw[]>) => {
     const metaRouter = deepCreateMeta(unref(list))
     allRouters.value = sortRouter(metaRouter)
     allAffixRouters.value = findAffix(allRouters)
     allUnKeepAliveRouters.value = findUnKeepAlive(allRouters)
+    allIframeRouters.value = deepCreateIframe(allRouters)
     return setRouterRedirect(allRouters)
   }
 
   return {
     allRouters,
     allAffixRouters,
     allUnKeepAliveRouters,
+    allIframeRouters,
     createRouterHelper,
   }
 }

src/store/modules/useLayoutStore.ts

@@ -45,12 +45,14 @@ export interface settingType {
   isDark: boolean
   /** 是否全屏 */
   isFullscreen: boolean
+  /** 是否支持全屏 */
+  isSupported: boolean
 }
 // NOTE (布局配置  2023-9-7 14:43)
 export const useLayoutStore = defineStore(
   'useLayoutStore',
   () => {
-    const { isFullscreen, enter, exit } = useFullscreen(
+    const { isFullscreen, enter, exit, isSupported } = useFullscreen(
       document.documentElement,
     )
     const layoutAttrs = reactive<settingType>({
@@ -59,8 +61,8 @@ export const useLayoutStore = defineStore(
       isAccordion: false,
       isShowTrigger: 'bar',
       isInverted: true,
-      isFixedFooter: true,
-      isFixedHeader: true,
+      isFixedFooter: false,
+      isFixedHeader: false,
       isNDrawerShow: false,
       isCollapsedWidth: 60,
       isSiderWidth: 200,
@@ -75,6 +77,7 @@ export const useLayoutStore = defineStore(
       themeColor: '#1890ff',
       isDark: isDark as unknown as boolean,
       isFullscreen: isFullscreen.value,
+      isSupported: isSupported.value,
     })
     const setAttrs = <T extends keyof settingType>(key: T, value: MaybeRefOrGetter<settingType[T]>) => {
       layoutAttrs[key] = toValue(value)

src/types/routerType.d.ts

@@ -1,32 +1,42 @@
 interface routeMeta {
   /** 路由标题 */
   isTitle: string
-  /** 是否改变网页标题
+  /**
+   * 是否改变网页标题
    * @default true
-   * */
+   */
   changeTitle?: boolean
-  /** 菜单顺序,同层比较
+  /**
+   * 菜单顺序,同层比较
    * @default 0
-   * */
+   */
   isOrder?: number
   /** 图标名称 */
   lineIcon?: string
   /** 本地图标名称 */
   localIcon?: string
-  /** 是否是固定页，默认不固定
+  /**
+   * 是否是固定页，默认不固定
    * @default undefined
-   * */
+   */
   isAffix?: true
-  /** 是否隐藏在菜单,面包屑中隐藏，默认不隐藏
+  /**
+   * 是否隐藏在菜单,面包屑中隐藏，默认不隐藏
    * @default undefined
-   **/
+   */
   isHidden?: true
-  /** 是否缓存,默认缓存
+  /**
+   * 是否缓存,默认缓存
    * @default undefined
-   * */
+   */
   isKeepAlive?: false
+  /**
+   * isIframe: 是否是iframe，默认不是
+   * @default undefined
+   */
+  isIframe?: true
 }
-type RouteRecordRaw=import('vue-router').RouteRecordRaw
+type RouteRecordRaw = import('vue-router').RouteRecordRaw
 interface routerObject extends Omit<RouteRecordRaw, 'component' | 'meta' | 'children' | 'name'> {
   parentPath?: string
   component?: RouteRecordRaw['component'] | routerTypeKeys
@@ -35,7 +45,7 @@ interface routerObject extends Omit<RouteRecordRaw, 'component' | 'meta' | 'chil
   name?: 'ExteriorNotFoundView' | 'InteriorNotFound' | string
 }
 
-type RouteNamedMap=import('vue-router/auto/routes').RouteNamedMap
+type RouteNamedMap = import('vue-router/auto/routes').RouteNamedMap
 type RoutePathUnion = RouteNamedMap[keyof RouteNamedMap]['path']
 type RouteNameUnion = keyof RouteNamedMap
-type IEnhanceAutoRouter=Record<RoutePathUnion | string, import('vue-router/auto').RouteMeta>
+type IEnhanceAutoRouter = Record<RoutePathUnion | string, import('vue-router/auto').RouteMeta>