vue-stack-tabs 1.1.0 → 1.3.1

package/src/lib/StackTabs.vue

@@ -6,50 +6,61 @@
   - 包裹在 router-view 外层，将路由渲染到对应标签的缓存页面中
 
   数据流：
-  - useTabPanel：tabs/caches/excludedCacheIdsForRefresh/refreshKey
+  - useTabPanel：tabs、缓存列表与页面级刷新版本
   - useTabActions：openTab/closeTab 等，需 setIFramePath
   - keep-alive include=caches，exclude=excludedCacheIdsForRefresh（刷新时排除）
 -->
 <script lang="ts" setup>
-import { computed, onBeforeMount, onBeforeUnmount, provide, reactive, ref, watch } from 'vue'
-import type { TransitionProps, DefineComponent, VNode } from 'vue'
-import { type RouteLocationNormalizedLoaded } from 'vue-router'
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onBeforeMount,
+  onBeforeUnmount,
+  provide,
+  ref,
+  watch
+} from 'vue'
+import type { TransitionProps } from 'vue'
 import { getMaxZIndex } from './utils/scrollUtils'
-import { isInvalidIframeUrl } from './utils/urlParser'
+import { isAllowedTabUrl } from './utils/urlParser'
+import { applyStackTabsLocale } from './i18n/stackTabsLocale'
 import { type ITabData, TabScrollMode } from './model/TabModel'
 import TabHeader from './components/TabHeader/index.vue'
+import StackKeepAlive from './components/StackKeepAlive/StackKeepAlive.vue'
 import useTabPanel from './hooks/useTabPanel'
 import useTabActions from './hooks/useTabActions'
 import { useI18n } from 'vue-i18n-lite'
-import { useTabEmitter } from '@/lib/hooks/useTabEventBus'
-const {
-  tabs,
-  caches,
-  iframeRefreshKeys,
-  activeCacheKey,
-  destroy,
-  addPage,
-  initialize,
-  setMaxSize,
-  setGlobalScroll,
-  setSessionPrefix
-} = useTabPanel()
-/** keep-alive 的 include 列表；excludedCacheIdsForRefresh 为刷新时临时 exclude，触发重挂载 */
+import { TabEventType, tabEmitterKey } from './hooks/useTabEventBus'
+import {
+  createStackTabsRuntimeContext,
+  maximumKey,
+  registerStackTabsRuntimeContext,
+  stackTabsContextKey,
+  unregisterStackTabsRuntimeContext
+} from './hooks/stackTabsContext'
+import { getStackTabPanelId, getStackTabTabId } from './utils/stackTabsA11y'
+import { useIframeManager } from './hooks/useIframeManager'
+type StackTabsIframeReferrerPolicy =
+  | ''
+  | 'no-referrer'
+  | 'no-referrer-when-downgrade'
+  | 'origin'
+  | 'origin-when-cross-origin'
+  | 'same-origin'
+  | 'strict-origin'
+  | 'strict-origin-when-cross-origin'
+  | 'unsafe-url'
+
 const emit = defineEmits(['onActive', 'onPageLoaded'])
 const props = withDefaults(
   defineProps<{
-    // 初始页签数据
     defaultTabs?: ITabData[]
-    // 最大打开数量
     max?: number
-    // 右键菜单
     contextmenu?: boolean | object
-    // 页面转场效果
     pageTransition?: string
     pageTransitionBack?: string
-    // 标签转场效果
     tabTransition?: string | TransitionProps
-    // tab 滚动效果
     tabScrollMode?: TabScrollMode
     width?: string
     height?: string
@@ -58,8 +69,11 @@ const props = withDefaults(
     globalScroll?: boolean
     iframePath: string
     sessionPrefix?: string
-    /** 允许通过 postMessage 调用 openTab 的 iframe 来源，默认仅同源 */
     iframeAllowedOrigins?: string[]
+    iframeSandbox?: string
+    iframeReferrerPolicy?: StackTabsIframeReferrerPolicy
+    iframeAllow?: string
+    iframeLoadTimeout?: number
   }>(),
   {
     defaultTabs: () => [],
@@ -71,205 +85,169 @@ const props = withDefaults(
     tabScrollMode: TabScrollMode.BOTH,
     width: '100%',
     height: '100%',
-    i18n: 'zh-CN',
+    i18n: undefined,
     space: 300,
     globalScroll: false,
     sessionPrefix: '',
-    iframeAllowedOrigins: () => []
+    iframeAllowedOrigins: () => [],
+    iframeSandbox: 'allow-scripts allow-forms allow-popups allow-downloads allow-same-origin',
+    iframeReferrerPolicy: 'strict-origin-when-cross-origin' as StackTabsIframeReferrerPolicy,
+    iframeAllow: '',
+    iframeLoadTimeout: 15000
   }
 )
 const { changeLocale, t } = useI18n()
-/** 是否最大化显示，通过 provide 向下传递 */
+const runtimeContext =
+  inject(stackTabsContextKey, null) ??
+  createStackTabsRuntimeContext({
+    iframePath: props.iframePath,
+    maxTabCount: props.max,
+    useGlobalScroll: props.globalScroll,
+    sessionPrefix: props.sessionPrefix
+  })
+const stackTabsApp = getCurrentInstance()?.appContext.app
+const isRuntimeContextOwner = registerStackTabsRuntimeContext(
+  runtimeContext,
+  stackTabsApp ? { app: stackTabsApp } : undefined
+)
+if (isRuntimeContextOwner) {
+  provide(stackTabsContextKey, runtimeContext)
+  provide(tabEmitterKey, runtimeContext.eventBus)
+}
 const maximum = ref<boolean>(false)
-provide('maximum', maximum)
-const { setIFramePath, openTab } = useTabActions()
-setIFramePath(props.iframePath)
-setGlobalScroll(props.globalScroll)
-changeLocale(props.i18n)
-/** 将 router-view 的 Component 包装为带缓存 id 的页面组件，交给 addPage 注册到对应标签 */
-const tabWrapper = (route: RouteLocationNormalizedLoaded, component: VNode): DefineComponent => {
-  return addPage(route, component)
+const maximumZIndex = ref<number>()
+if (isRuntimeContextOwner) {
+  provide(maximumKey, maximum)
 }
-/** 标签激活时向外转发 */
+watch(maximum, (isMaximum) => {
+  maximumZIndex.value = isMaximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
+})
+const panelApi = isRuntimeContextOwner
+  ? useTabPanel()
+  : {
+      tabs: runtimeContext.tabs,
+      iframeRefreshKeys: runtimeContext.iframeRefreshKeys,
+      destroy: () => undefined,
+      initialize: () => undefined,
+      setMaxSize: () => undefined,
+      setGlobalScroll: () => undefined,
+      setSessionPrefix: () => undefined
+    }
+const {
+  tabs,
+  iframeRefreshKeys,
+  destroy,
+  initialize,
+  setMaxSize,
+  setGlobalScroll,
+  setSessionPrefix
+} = panelApi
+const tabActions = isRuntimeContextOwner
+  ? useTabActions()
+  : {
+      setIFramePath: () => undefined,
+      openTab: () => Promise.resolve(undefined),
+      openInNewWindow: () => undefined
+    }
+const { setIFramePath, openTab, openInNewWindow } = tabActions
+if (isRuntimeContextOwner) {
+  setIFramePath(props.iframePath)
+  setGlobalScroll(props.globalScroll)
+  setMaxSize(props.max)
+  applyStackTabsLocale(changeLocale, props.i18n)
+}
+
 const onTabActive = (id: string) => {
   emit('onActive', id)
 }
-setMaxSize(props.max)
-/** 页面组件加载完成时向外转发 */
 const onComponentLoaded = () => {
   emit('onPageLoaded')
 }
-/** 当前页面转场动画名，前进/后退时由 useTabRouter 发出 FORWARD/BACKWARD 事件切换 */
+
 const pageSwitch = ref<string>(props.pageTransition)
-const emitter = useTabEmitter()
-/** 前进时使用 pageTransition */
+const emitter = runtimeContext.eventBus
 const forwardHandler = () => {
   pageSwitch.value = props.pageTransition
 }
-/** 后退时使用 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)
-  )
+if (isRuntimeContextOwner) {
+  emitter.on(TabEventType.FORWARD, forwardHandler)
+  emitter.on(TabEventType.BACKWARD, backwardHandler)
 }
 
-// 当 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 {
-      console.log(
-        `[vue-stack-tabs] Sending 'vue-stack-tabs:refresh' postMessage to iframe: ${tabId}`
-      )
-      iframe.contentWindow.postMessage({ type: 'vue-stack-tabs:refresh' }, '*')
-    } catch (e) {
-      console.warn(`[vue-stack-tabs] Failed to send refresh postMessage to iframe: ${tabId}`, e)
-    }
-  } else {
-    console.warn(
-      `[vue-stack-tabs] IFrame element not found for tabId: ${tabId} when trying to refresh.`
-    )
-  }
-}
+const {
+  iframeTabs,
+  activeNonIframeTab,
+  hasActiveNonIframeTab,
+  iframeSrcMap,
+  getIframeRefreshKey,
+  getIframeKey,
+  getIframeLoadState,
+  shouldShowIframeLoading,
+  shouldShowIframeError,
+  retryIframe,
+  setIframeRef,
+  handleIframeLoad,
+  handleRefreshIframePostMessage,
+  createMessageHandler
+} = useIframeManager({
+  tabs,
+  iframeRefreshKeys,
+  iframeLoadTimeout: props.iframeLoadTimeout,
+  t
+})
 
-/** 允许通过 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)
-  }
-}
+const handleMessage = createMessageHandler(allowedOrigins, openTab)
 
-;(emitter as { on: (t: string, h: (p: unknown) => void) => void }).on(
-  'REFRESH_IFRAME_POSTMESSAGE',
-  handleRefreshIframePostMessage
-)
+if (isRuntimeContextOwner) {
+  emitter.on(TabEventType.REFRESH_IFRAME_POSTMESSAGE, handleRefreshIframePostMessage)
+}
 
 onBeforeMount(() => {
+  if (!isRuntimeContextOwner) return
   setSessionPrefix(props.sessionPrefix)
   initialize(props.defaultTabs)
   window.addEventListener('message', handleMessage)
 })
 onBeforeUnmount(() => {
+  if (!isRuntimeContextOwner) return
   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)
+  emitter.off(TabEventType.REFRESH_IFRAME_POSTMESSAGE, handleRefreshIframePostMessage)
+  emitter.off(TabEventType.FORWARD, forwardHandler)
+  emitter.off(TabEventType.BACKWARD, backwardHandler)
   destroy()
+  unregisterStackTabsRuntimeContext(
+    runtimeContext,
+    stackTabsApp ? { app: stackTabsApp } : undefined
+  )
 })
 </script>
 <template>
   <div
+    v-if="isRuntimeContextOwner"
     class="stack-tab"
     :style="{
       width: width,
       height: height,
-      'z-index': maximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
+      'z-index': maximumZIndex
     }"
     :class="{ 'stack-tab__maximum': maximum }"
   >
-    <tab-header :space="space" :tab-transition="tabTransition" :max="max" @active="onTabActive">
+    <tab-header
+      :space="space"
+      :tab-transition="tabTransition"
+      :tab-scroll-mode="tabScrollMode"
+      :contextmenu="contextmenu"
+      :max="max"
+      @active="onTabActive"
+    >
       <template #leftButton>
         <slot name="leftButton" />
       </template>
@@ -278,40 +256,89 @@ onBeforeUnmount(() => {
       </template>
     </tab-header>
     <div class="stack-tab__container">
-      <router-view v-slot="{ Component, route }">
-        <transition :name="pageSwitch" appear mode="out-in">
-          <keep-alive :include="caches">
-            <component
-              :is="tabWrapper(route, Component)"
-              :key="activeCacheKey"
-              :vnode="Component"
-              @on-loaded="onComponentLoaded"
-            />
-          </keep-alive>
-        </transition>
-      </router-view>
-      <transition-group :name="pageTransition" tag="div" class="stack-tab__iframes" appear>
+      <Transition :name="pageSwitch" appear>
+        <div
+          v-show="hasActiveNonIframeTab"
+          :id="activeNonIframeTab ? getStackTabPanelId(activeNonIframeTab.id) : undefined"
+          :key="'keep-alive'"
+          class="stack-tab__keep-alive-panel"
+          :role="activeNonIframeTab ? 'tabpanel' : undefined"
+          :aria-labelledby="
+            activeNonIframeTab ? getStackTabTabId(activeNonIframeTab.id) : undefined
+          "
+          :aria-hidden="activeNonIframeTab ? undefined : 'true'"
+          :hidden="!hasActiveNonIframeTab"
+        >
+          <StackKeepAlive :transition-name="pageSwitch" @loaded="onComponentLoaded" />
+        </div>
+      </Transition>
+      <div class="stack-tab__iframes">
         <Transition
           v-for="frame of iframeTabs"
           :key="getIframeKey(frame)"
-          :name="pageTransition"
+          :name="pageSwitch"
           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
+            v-show="frame.active"
+            :id="getStackTabPanelId(frame.id)"
+            :key="getIframeKey(frame)"
+            class="stack-tab__iframe-wrapper"
+            role="tabpanel"
+            :aria-labelledby="getStackTabTabId(frame.id)"
+          >
+            <div
+              v-if="shouldShowIframeLoading(frame.id)"
+              class="stack-tab__iframe-loading"
+              role="status"
+              aria-live="polite"
+              :aria-label="t('VueStackTab.loading')"
+            >
+              <slot name="iframeLoading" :tab="frame">
+                <span class="stack-tab__iframe-loading-text">{{ t('VueStackTab.loading') }}</span>
+              </slot>
+            </div>
+            <div
+              v-if="shouldShowIframeError(frame.id)"
+              class="stack-tab__iframe-error"
+              role="alert"
+            >
+              <slot name="iframeError" :tab="frame" :retry="retryIframe">
+                <span class="stack-tab__iframe-error-text">
+                  {{ getIframeLoadState(frame.id).message ?? t('VueStackTab.iframeLoadTimeout') }}
+                </span>
+                <button
+                  type="button"
+                  class="stack-tab__iframe-error-retry"
+                  @click="retryIframe(frame.id)"
+                >
+                  {{ t('VueStackTab.retry') }}
+                </button>
+                <button
+                  v-if="frame.url && isAllowedTabUrl(frame.url)"
+                  type="button"
+                  class="stack-tab__iframe-error-open"
+                  @click="openInNewWindow(frame.id)"
+                >
+                  {{ t('VueStackTab.openInNewWindow') }}
+                </button>
+              </slot>
             </div>
             <iframe
-              :key="iframeRefreshKeys[frame.id] || 0"
               :ref="(el) => setIframeRef(frame.id, el as HTMLIFrameElement | null)"
               class="stack-tab__iframe"
-              :src="getIframeSrc(frame)"
+              :src="iframeSrcMap[frame.id] || 'about:blank'"
+              :data-refresh-key="getIframeRefreshKey(frame.id)"
+              :title="frame.title || t('VueStackTab.iframeTitle') || 'Stack tab iframe'"
+              :sandbox="iframeSandbox || undefined"
+              :referrerpolicy="iframeReferrerPolicy"
+              :allow="iframeAllow || undefined"
               frameborder="0"
-              @load="setIframeLoaded(frame.id)"
+              @load="handleIframeLoad(frame, $event)"
             />
           </div>
         </Transition>
-      </transition-group>
+      </div>
     </div>
   </div>
 </template>