vue-stack-tabs 1.1.0 → 1.3.1

package/src/lib/hooks/useTabEventBus.ts

@@ -1,31 +1,41 @@
+/**
+ * 标签事件总线。
+ *
+ * 基于 mitt 实现组件间事件通信，用于 tab 激活、页面 loading、
+ * 栈内导航（forward/backward）、iframe 刷新等事件的发布/订阅。
+ */
+import type { InjectionKey } from 'vue'
+import { hasInjectionContext, inject } from 'vue'
 import type { Emitter, EventType } from 'mitt'
-import mitt from 'mitt'
-import { type App, inject } from 'vue'
+import { resolveStackTabsRuntimeContext } from './stackTabsContext'
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
-    $layerEmitter: Emitter<Record<EventType, unknown>>
+    $layerEmitter: Emitter<TabEventPayloadMap>
   }
 }
 
-/** 全局标签事件总线，用于跨组件通信（激活、加载等） */
-const eventBus = mitt<Record<EventType, unknown>>()
-
-const plugin = {
-  install(app: App) {
-    app.provide('tabEmitter', eventBus)
-  }
-}
-
-/** 获取标签事件总线，用于组件间通信 */
-export const useTabEmitter = <T extends Record<EventType, unknown>>(): Emitter<T> => {
-  return inject('tabEmitter')!
-}
-
 /** 标签相关事件类型 */
 export enum TabEventType {
   PAGE_LOADING = 'PAGE_LOADING',
-  TAB_ACTIVE = 'TAB_ACTIVE'
+  TAB_ACTIVE = 'TAB_ACTIVE',
+  FORWARD = 'FORWARD',
+  BACKWARD = 'BACKWARD',
+  REFRESH_IFRAME_POSTMESSAGE = 'REFRESH_IFRAME_POSTMESSAGE'
+}
+
+export interface TabEventPayloadMap extends Record<EventType, unknown> {
+  [TabEventType.PAGE_LOADING]: { tId: string; value: boolean }
+  [TabEventType.TAB_ACTIVE]: { id: string; isRoute?: boolean }
+  [TabEventType.FORWARD]: void
+  [TabEventType.BACKWARD]: void
+  [TabEventType.REFRESH_IFRAME_POSTMESSAGE]: string
 }
 
-export default plugin
+export const tabEmitterKey: InjectionKey<Emitter<TabEventPayloadMap>> = Symbol('tabEmitter')
+
+/** 获取标签事件总线，用于组件间通信 */
+export const useTabEmitter = (): Emitter<TabEventPayloadMap> => {
+  const injected = hasInjectionContext() ? inject(tabEmitterKey, null) : null
+  return injected ?? resolveStackTabsRuntimeContext().eventBus
+}

package/src/lib/hooks/useTabLoading.ts

@@ -10,17 +10,18 @@ import { TabEventType, useTabEmitter } from '../hooks/useTabEventBus'
 export default () => {
   const emitter = useTabEmitter()
   const { attrs } = getCurrentInstance() as ComponentInternalInstance
+  const getTabId = () => String(attrs.tId ?? '')
   onUnmounted(() => {
     closeTabLoading()
   })
   /** 显示加载遮罩 */
   const openTabLoading = () => {
-    emitter.emit(TabEventType.PAGE_LOADING, { tId: attrs.tId, value: true })
+    emitter.emit(TabEventType.PAGE_LOADING, { tId: getTabId(), value: true })
   }
 
   /** 隐藏加载遮罩 */
   const closeTabLoading = () => {
-    emitter.emit(TabEventType.PAGE_LOADING, { tId: attrs.tId, value: false })
+    emitter.emit(TabEventType.PAGE_LOADING, { tId: getTabId(), value: false })
   }
   return { openTabLoading, closeTabLoading }
 }