vue-stack-tabs 0.1.51 → 1.0.0

package/src/lib/StackTabs.vue

@@ -1,16 +1,41 @@
+<!--
+  StackTabs - 堆叠式标签页主组件
+
+  职责：
+  - 标签页容器，集成 TabHeader、router-view、keep-alive、iframe 展示
+  - 包裹在 router-view 外层，将路由渲染到对应标签的缓存页面中
+
+  数据流：
+  - useTabPanel：tabs/caches/excludedCacheIdsForRefresh/refreshKey
+  - useTabActions：openTab/closeTab 等，需 setIFramePath
+  - keep-alive include=caches，exclude=excludedCacheIdsForRefresh（刷新时排除）
+-->
 <script lang="ts" setup>
-import { onBeforeMount, onBeforeUnmount, provide, ref } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, provide, reactive, ref, watch } from 'vue'
 import type { TransitionProps, DefineComponent, VNode } from 'vue'
 import { type RouteLocationNormalizedLoaded } from 'vue-router'
-import { getMaxZIndex } from './utils/TabScrollHelper'
+import { getMaxZIndex } from './utils/scrollUtils'
+import { isInvalidIframeUrl } from './utils/urlParser'
 import { type ITabData, TabScrollMode } from './model/TabModel'
 import TabHeader from './components/TabHeader/index.vue'
-import useTabpanel from './hooks/useTabpanel'
-import useStackTab from './hooks/useStackTab'
+import useTabPanel from './hooks/useTabPanel'
+import useTabActions from './hooks/useTabActions'
 import { useI18n } from 'vue-i18n-lite'
-import { useEmitter } from '@/lib/hooks/useTabMitt'
-const { tabs, initialed,pageShown, caches, destroy, addPage, initial, setMaxSize, setGlobalScroll,clearSession ,setSessionPrefix} =
-  useTabpanel()
+import { useTabEmitter } from '@/lib/hooks/useTabEventBus'
+const {
+  tabs,
+  caches,
+  refreshKey,
+  excludedCacheIdsForRefresh,
+  iframeRefreshKeys,
+  destroy,
+  addPage,
+  initialize,
+  setMaxSize,
+  setGlobalScroll,
+  setSessionPrefix
+} = useTabPanel()
+/** keep-alive 的 include 列表；excludedCacheIdsForRefresh 为刷新时临时 exclude，触发重挂载 */
 const emit = defineEmits(['onActive', 'onPageLoaded'])
 const props = withDefaults(
   defineProps<{
@@ -18,8 +43,6 @@ const props = withDefaults(
     defaultTabs?: ITabData[]
     // 最大打开数量
     max?: number
-    // 新页加入哪个位置
-    append?: string
     // 右键菜单
     contextmenu?: boolean | object
     // 页面转场效果
@@ -33,14 +56,15 @@ const props = withDefaults(
     height?: string
     i18n?: string
     space?: number
-    globalScroll: boolean
+    globalScroll?: boolean
     iframePath: string
     sessionPrefix?: string
+    /** 允许通过 postMessage 调用 openTab 的 iframe 来源，默认仅同源 */
+    iframeAllowedOrigins?: string[]
   }>(),
   {
     defaultTabs: () => [],
     max: 20,
-    append: 'last',
     contextmenu: true,
     tabTransition: 'stack-tab-zoom',
     pageTransition: 'stack-tab-swap',
@@ -52,51 +76,181 @@ const props = withDefaults(
     space: 300,
     globalScroll: false,
     sessionPrefix: '',
+    iframeAllowedOrigins: () => []
   }
 )
-// provide('locales', { ...props.i18n })
-// 最大化,并向下传递
-const { changeLocale } = useI18n()
+const { changeLocale, t } = useI18n()
+/** 是否最大化显示，通过 provide 向下传递 */
 const maximum = ref<boolean>(false)
 provide('maximum', maximum)
-const { setIFramePath } = useStackTab()
+const { setIFramePath, openTab } = useTabActions()
 setIFramePath(props.iframePath)
 setGlobalScroll(props.globalScroll)
 changeLocale(props.i18n)
-onBeforeMount(() => {
-  console.log('on Before mount')
-  setSessionPrefix(props.sessionPrefix)
-  initial(props.defaultTabs)
-
-})
+/** 将 router-view 的 Component 包装为带缓存 id 的页面组件，交给 addPage 注册到对应标签 */
 const tabWrapper = (route: RouteLocationNormalizedLoaded, component: VNode): DefineComponent => {
-  // return defineAsyncComponent(() => addPage(route, component))
-  // if(!initialed.value){
-  //   setSessionPrefix(props.sessionPrefix)
-  //   initial(props.defaultTabs)
-  // }
   return addPage(route, component)
 }
+/** 标签激活时向外转发 */
 const onTabActive = (id: string) => {
   emit('onActive', id)
 }
 setMaxSize(props.max)
-onBeforeUnmount(() => {
-  destroy()
-})
+/** 页面组件加载完成时向外转发 */
 const onComponentLoaded = () => {
   emit('onPageLoaded')
 }
+/** 当前页面转场动画名，前进/后退时由 useTabRouter 发出 FORWARD/BACKWARD 事件切换 */
 const pageSwitch = ref<string>(props.pageTransition)
-const emitter = useEmitter()
-emitter.on('FORWARD', () => {
+const emitter = useTabEmitter()
+/** 前进时使用 pageTransition */
+const forwardHandler = () => {
   pageSwitch.value = props.pageTransition
-})
-emitter.on('BACKWARD', () => {
+}
+/** 后退时使用 pageTransitionBack */
+const backwardHandler = () => {
   pageSwitch.value = props.pageTransitionBack
+}
+emitter.on('FORWARD', forwardHandler)
+emitter.on('BACKWARD', backwardHandler)
+
+/** iframe 标签列表，computed 避免重复 filter */
+const iframeTabs = computed(() => tabs.value.filter((item) => item.iframe))
+
+/** 已激活过的 iframe 使用真实 URL（保留内容），未激活过的用 about:blank（按需加载，切换不重载） */
+const iframeEverActivated = reactive<Record<string, boolean>>({})
+/** 当前激活且有有效 URL 的 iframe 列表（供 watch 复用，减少重复 filter） */
+const activeIframesWithUrl = computed(() =>
+  iframeTabs.value.filter((f) => f.active && (f.url ?? '') && !isInvalidIframeUrl(f.url ?? ''))
+)
+watch(
+  activeIframesWithUrl,
+  (frames) => {
+    for (const f of frames) iframeEverActivated[f.id] = true
+  },
+  { immediate: true, deep: true }
+)
+/**
+ * 获取 iframe 的 src：未激活过的用 about:blank 延迟加载，已激活的保留真实 URL
+ * @param frame - iframe 标签项
+ * @returns 实际加载的 URL
+ */
+const getIframeSrc = (frame: { id: string; url?: string }) => {
+  const url = frame.url ?? ''
+  if (isInvalidIframeUrl(url)) return 'about:blank'
+  return iframeEverActivated[frame.id] ? url : 'about:blank'
+}
+
+/** iframe 的 key：postMessage 模式仅用 id（不重建，动画正常）；reload 模式含 refreshKeys */
+const getIframeKey = (frame: { id: string; iframeRefreshMode?: string }) =>
+  frame.iframeRefreshMode === 'reload'
+    ? `${frame.id}-${iframeRefreshKeys.value[frame.id] ?? 0}`
+    : frame.id
+
+/** 各 iframe 是否已加载过（切回时不再显示 loading，因 load 不会再次触发） */
+const iframeHasLoaded = reactive<Record<string, boolean>>({})
+/** 各 iframe 加载状态，仅在首次加载时显示 */
+const iframeLoadingStates = reactive<Record<string, boolean>>({})
+/** iframe 加载超时定时器 Map，用于兜底清理 loading 状态 */
+const loadTimeoutIds = new Map<string, ReturnType<typeof setTimeout>>()
+/** 加载超时时间（ms），超时后强制隐藏 loading */
+const LOAD_TIMEOUT_MS = 5000
+
+/** 标记 iframe 已加载完成，清除超时并隐藏 loading */
+const setIframeLoaded = (frameId: string) => {
+  const tid = loadTimeoutIds.get(frameId)
+  if (tid) {
+    clearTimeout(tid)
+    loadTimeoutIds.delete(frameId)
+  }
+  iframeHasLoaded[frameId] = true
+  iframeLoadingStates[frameId] = false
+}
+
+/** 为 iframe 显示 loading 状态，已加载过的切回时不重复显示；设置超时兜底 */
+const setIframeLoading = (frameId: string) => {
+  if (iframeHasLoaded[frameId]) return // 已加载过，切回时不显示 loading
+  iframeLoadingStates[frameId] = true
+  const tid = loadTimeoutIds.get(frameId)
+  if (tid) clearTimeout(tid)
+  loadTimeoutIds.set(
+    frameId,
+    setTimeout(() => {
+      loadTimeoutIds.delete(frameId)
+      iframeLoadingStates[frameId] = false
+    }, LOAD_TIMEOUT_MS)
+  )
+}
+
+// 当 iframe 标签变为激活且有真实 URL 时，显示加载状态（仅首次）
+watch(
+  activeIframesWithUrl,
+  (frames) => {
+    for (const f of frames) setIframeLoading(f.id)
+  },
+  { immediate: true, deep: true }
+)
+
+/** iframe 元素 refs，key 为 tabId，用于 postMessage 刷新时获取 contentWindow */
+const iframeElRefs = reactive<Record<string, HTMLIFrameElement | null>>({})
+/** 注册/注销 iframe 的 DOM 引用 */
+const setIframeRef = (id: string, el: HTMLIFrameElement | null) => {
+  if (el) {
+    iframeElRefs[id] = el
+  } else {
+    delete iframeElRefs[id]
+  }
+}
+
+/** postMessage 刷新：向 iframe 发送消息，由其自行刷新 */
+const handleRefreshIframePostMessage = (payload: unknown) => {
+  const tabId = payload as string
+  const iframe = iframeElRefs[tabId]
+  if (iframe?.contentWindow) {
+    try {
+      iframe.contentWindow.postMessage({ type: 'vue-stack-tabs:refresh' }, '*')
+    } catch {
+      /* 跨域时可能失败，忽略 */
+    }
+  }
+}
+
+/** 允许通过 postMessage 调用 openTab 的来源白名单 */
+const allowedOrigins = computed(() => {
+  const origin = typeof window !== 'undefined' ? window.location.origin : ''
+  const extra = props.iframeAllowedOrigins ?? []
+  return [origin, ...extra].filter(Boolean)
+})
+/** 处理 iframe 发来的 postMessage，校验 origin 后调用 openTab */
+const handleMessage = (ev: MessageEvent) => {
+  if (!allowedOrigins.value.includes(ev.origin)) return
+  const data = ev.data
+  if (!data || typeof data !== 'object' || data.type !== 'vue-stack-tabs:openTab') return
+  const payload = data.payload
+  if (payload && typeof payload === 'object' && payload.title && payload.path) {
+    openTab(payload)
+  }
+}
+
+;(emitter as { on: (t: string, h: (p: unknown) => void) => void }).on(
+  'REFRESH_IFRAME_POSTMESSAGE',
+  handleRefreshIframePostMessage
+)
+
+onBeforeMount(() => {
+  setSessionPrefix(props.sessionPrefix)
+  initialize(props.defaultTabs)
+  window.addEventListener('message', handleMessage)
 })
 onBeforeUnmount(() => {
-  clearSession()
+  window.removeEventListener('message', handleMessage)
+  ;(emitter as { off: (t: string, h: (p: unknown) => void) => void }).off(
+    'REFRESH_IFRAME_POSTMESSAGE',
+    handleRefreshIframePostMessage
+  )
+  emitter.off('FORWARD', forwardHandler)
+  emitter.off('BACKWARD', backwardHandler)
+  destroy()
 })
 </script>
 <template>
@@ -109,7 +263,7 @@ onBeforeUnmount(() => {
     }"
     :class="{ 'stack-tab__maximum': maximum }"
   >
-    <tab-header :space="space" @active="onTabActive" :tab-transition="tabTransition" :max="max">
+    <tab-header :space="space" :tab-transition="tabTransition" :max="max" @active="onTabActive">
       <template #leftButton>
         <slot name="leftButton" />
       </template>
@@ -120,25 +274,46 @@ onBeforeUnmount(() => {
     <div class="stack-tab__container">
       <router-view v-slot="{ Component, route }">
         <transition :name="pageSwitch" appear mode="out-in">
-          <keep-alive :include="caches">
+          <keep-alive :include="caches" :exclude="excludedCacheIdsForRefresh">
             <component
               :is="tabWrapper(route, Component)"
-              v-if="pageShown"
-              :key="`${route.name}_${route.fullPath}`"
+              :key="`${route.fullPath}_${refreshKey}`"
               @on-loaded="onComponentLoaded"
             />
           </keep-alive>
         </transition>
       </router-view>
-      <transition-group :name="pageTransition" appear>
-        <iframe
-          v-for="frame of tabs.filter((item) => item.iframe)"
-          v-show="frame.active"
-          :key="frame.id"
-          class="stack-tab__iframe"
-          :src="/^(javascript|data):/i.test(frame.url ?? '') ? 'about:blank' : frame.url"
-          frameborder="0"
-        />
+      <transition-group
+        :name="pageTransition"
+        tag="div"
+        class="stack-tab__iframes"
+        appear
+      >
+        <Transition
+          v-for="frame of iframeTabs"
+          :key="getIframeKey(frame)"
+          :name="pageTransition"
+          appear
+        >
+          <div
+            v-show="frame.active"
+            class="stack-tab__iframe-wrapper"
+          >
+            <div
+              v-show="iframeLoadingStates[frame.id] !== false"
+              class="stack-tab__iframe-loading"
+            >
+              <span class="stack-tab__iframe-loading-text">{{ t('VueStackTab.loading') }}</span>
+            </div>
+            <iframe
+              :ref="(el) => setIframeRef(frame.id, el as HTMLIFrameElement | null)"
+              class="stack-tab__iframe"
+              :src="getIframeSrc(frame)"
+              frameborder="0"
+              @load="setIframeLoaded(frame.id)"
+            />
+          </div>
+        </Transition>
       </transition-group>
     </div>
   </div>

package/src/lib/assets/image/open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="200" height="200"><path d="M640 384v-85.333H213.333v597.334h597.334V384H640zm0-128h128v128h128V256H128v640h85.333V384H640V256z" fill="#444444"/></svg>

package/src/lib/assets/style/common/var.scss

@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 /*
 主色调
  */

package/src/lib/assets/style/icon.scss

@@ -91,3 +91,9 @@
   mask: url('../image/right_arrow.svg') no-repeat center center;
   mask-size: contain;
 }
+
+/* 新窗口打开 */
+.stack-tab__icon-open {
+  mask: url('../image/open.svg') no-repeat center center;
+  mask-size: contain;
+}

package/src/lib/assets/style/stackTab.scss

@@ -293,17 +293,58 @@
     }
   }
 
+  &__iframes {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    /* 进入的 iframe 置于上层；延迟进入，等待其他 tab 离开动画完成后再播放入场 */
+    .stack-tab-swap-enter-active {
+      z-index: 1;
+      transition-duration: 0.5s;
+      transition-delay: 0.3s;
+    }
+    .stack-tab-swap-leave-active {
+      z-index: 0;
+      position: absolute;
+    }
+  }
+
+  &__iframe-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   &__iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    /*
-    新浏览器使用这个来消除frame的边框
-     */
     border: 0;
   }
+
+  &__iframe-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: var(--stack-tab-iframe-loading-bg, #f5f5f5);
+
+    &-text {
+      color: var(--stack-tab-iframe-loading-color, #999);
+      font-size: var(--stack-tab-font-size, 14px);
+    }
+  }
   /*
   右键菜单
    */

package/src/lib/assets/style/transition.scss

@@ -1,62 +1,63 @@
-/*
-transition 过渡样式
- */
-.stack-tab-zoom {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: scale(0);
-    opacity: 0;
-  }
-}
-
-/*
-页面交换
- */
-.stack-tab-swap {
-  $trans: 30px;
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-from {
-    transform: translateX($trans);
-  }
-
-  &-leave-to {
-    transform: translateX(-$trans);
-  }
-}
-
-.stack-tab-swap-back {
-  $trans: 30px;
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-from {
-    transform: translateX(-$trans);
-  }
-
-  &-leave-to {
-    transform: translateX($trans);
-  }
-}
+/*
+transition 过渡样式
+ */
+.stack-tab-zoom {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+/*
+页面交换
+ */
+.stack-tab-swap {
+  $trans: 30px;
+
+  &-move,
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX($trans);
+  }
+
+  &-leave-to {
+    transform: translateX(-$trans);
+  }
+}
+
+.stack-tab-swap-back {
+  $trans: 30px;
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(-$trans);
+  }
+
+  &-leave-to {
+    transform: translateX($trans);
+  }
+}

package/src/lib/components/ContextMenu/ContextMenuItem.vue

@@ -1,3 +1,8 @@
+<!--
+  ContextMenuItem - 右键菜单单项
+
+  职责：展示图标和标题，支持 disabled 状态
+-->
 <template>
   <div class="stack-tab__contextmenu-item">
     <div class="stack-tab__contextmenu-icon" :class="icon"></div>
@@ -7,7 +12,9 @@
 
 <script setup lang="ts">
 defineProps<{
+  /** 图标 class，如 stack-tab__icon-reload svg-mask */
   icon?: string
+  /** 显示文本 */
   title: string
 }>()
 </script>