vue-stack-tabs 1.4.1 → 1.4.2

package/src/lib/hooks/tabPanel/refresh.ts

@@ -4,8 +4,8 @@
  * 活动普通页面保持 cache id 稳定，只递增页面级刷新版本；非活动页面可直接替换缓存。
  */
 import type { Ref } from 'vue'
-import { triggerRef } from 'vue'
-import type { ITabItem } from '../../model/TabModel'
+import type { ITabItem, ITabPage } from '../../model/TabModel'
+import type { PagePatch } from './tabStore'
 
 export interface TabPanelRefreshApi {
   refreshTab: (id: string) => void
@@ -13,9 +13,11 @@ export interface TabPanelRefreshApi {
 }
 
 export interface CreateTabPanelRefreshOptions {
-  tabs: Ref<ITabItem[]>
+  getTabs: () => readonly ITabItem[]
+  getTopPage: (tabId: string) => ITabPage | null
+  /** 修改页面字段（刷新版本 / 页面 id）并触发 tabs 更新 */
+  updatePage: (tabId: string, pageId: string, patch: PagePatch) => boolean
   iframeRefreshKeys: Ref<Record<string, number>>
-  getTab: (id: string) => ITabItem | null
   createPageId: () => string
   addCache: (cacheName: string) => void
   evictPageCache: (cacheName: string) => void
@@ -30,9 +32,10 @@ export const createTabPanelRefresh = (
   options: CreateTabPanelRefreshOptions
 ): TabPanelRefreshApi => {
   const {
-    tabs,
+    getTabs,
+    getTopPage,
+    updatePage,
     iframeRefreshKeys,
-    getTab,
     createPageId,
     addCache,
     evictPageCache,
@@ -52,30 +55,31 @@ export const createTabPanelRefresh = (
   }
 
   const refreshPage = (tab: ITabItem, cacheNamesToEvict?: string[], cacheNamesToAdd?: string[]) => {
-    const currentPage = tab.pages.peek()
+    const currentPage = getTopPage(tab.id)
     if (!currentPage) return
 
     if (tab.active) {
-      currentPage.refreshVersion = (currentPage.refreshVersion ?? 0) + 1
-      // 通知 activePageRefreshVersion 这类依赖 tabs.value 的计算属性重新计算
-      triggerRef(tabs)
+      // updatePage 内部会触发 tabs 更新，activePageRefreshVersion 随之重新求值。
+      updatePage(tab.id, currentPage.id, {
+        refreshVersion: (currentPage.refreshVersion ?? 0) + 1
+      })
       return
     }
 
     const oldCacheName = currentPage.id
-    currentPage.id = createPageId()
-    currentPage.refreshVersion = 0
+    const nextPageId = createPageId()
+    updatePage(tab.id, oldCacheName, { id: nextPageId, refreshVersion: 0 })
     if (cacheNamesToEvict && cacheNamesToAdd) {
       cacheNamesToEvict.push(oldCacheName)
-      cacheNamesToAdd.push(currentPage.id)
+      cacheNamesToAdd.push(nextPageId)
       return
     }
     evictPageCache(oldCacheName)
-    addCache(currentPage.id)
+    addCache(nextPageId)
   }
 
   const refreshTab = (id: string) => {
-    const tab = getTab(id)
+    const tab = getTabs().find((item) => item.id === id)
     if (!tab?.refreshable) return
     if (tab.iframe) {
       refreshIframe(tab)
@@ -90,7 +94,7 @@ export const createTabPanelRefresh = (
     const iframeKeysUpdate = { ...iframeRefreshKeys.value }
     let iframeKeysChanged = false
 
-    for (const tab of tabs.value) {
+    for (const tab of getTabs()) {
       if (!tab.refreshable) continue
       if (tab.iframe) {
         if (tab.iframeRefreshMode === 'reload') {

package/src/lib/hooks/tabPanel/tabStore.ts

@@ -0,0 +1,595 @@
+/**
+ * tabPanel/tabStore - 标签/页面栈的唯一状态入口
+ *
+ * 内部使用规范化的三张“表”保存状态：
+ * - tabOrder + tabsById：标签顺序与标签记录
+ * - pageIdsByTabId：标签到页面 id 的一对多关系
+ * - pagesById：页面记录
+ *
+ * 对外仍通过 tabs Ref 暴露兼容的 ITabItem[]；每个 tab.pages 是 PageStackView，
+ * 读写会转发到 store，因此渲染层与公开类型不需要感知内部结构变化。
+ *
+ * 注意：本模块不依赖 vue-router，也不触发业务事件；路由事务与事件由 useTabPanel /
+ * useTabRouter 等上层编排。
+ */
+import { reactive, ref } from 'vue'
+import type { DefineComponent } from 'vue'
+import type { ITabItem, ITabPage } from '../../model/TabModel'
+import { Stack } from '../../model/TabModel'
+import { clonePage } from '../../utils/urlParser'
+import type { StackTabsRuntimeContext } from '../stackTabsContext'
+import { createTabPanelEviction, type TabPanelEvictionApi } from './evict'
+
+export interface RemoveTabResult {
+  status: 'not-found' | 'not-closable' | 'removed'
+  removed: ITabItem | null
+  /** 关闭后应激活的相邻标签；没有可激活标签时为空字符串 */
+  nextActiveId: string
+}
+
+/** updatePage 允许修改的字段；页面身份与刷新版本必须通过 store 写入 */
+export interface PagePatch {
+  id?: string
+  refreshVersion?: number
+  _backParams?: Record<string, unknown>
+}
+
+export interface TabStoreApi extends TabPanelEvictionApi {
+  // ---- 查询 ----
+  /** 返回标签列表的只读视图（运行时为同一个响应式数组） */
+  getTabs: () => readonly ITabItem[]
+  getTab: (id: string) => ITabItem | null
+  getActiveTab: () => ITabItem | null
+  /** 查找栈顶页面 path 与给定 path 相同的标签 */
+  findTabByTopPagePath: (path: string) => ITabItem | null
+  hasTab: (id: string) => boolean
+  canAddTab: () => boolean
+  getPages: (tabId: string) => readonly ITabPage[]
+  getTopPage: (tabId: string) => ITabPage | null
+  /** 返回深拷贝的页面栈快照，可直接用于 rollback */
+  getPageSnapshot: (tabId: string) => ITabPage[]
+
+  // ---- 标签写入 ----
+  addTab: (tab: ITabItem) => void
+  addTabs: (tabs: readonly ITabItem[]) => void
+  /** 唯一 active 写入口 */
+  activateTab: (id: string) => ITabItem | null
+  moveTab: (id: string, targetIndex: number) => boolean
+  removeTab: (id: string) => RemoveTabResult
+  removeTabs: (shouldRemove: (tab: ITabItem, index: number) => boolean) => ITabItem[]
+
+  // ---- 页面栈写入 ----
+  appendPage: (tabId: string, page: ITabPage) => void
+  /** 从栈顶弹出若干页，返回被弹出的页面（由调用方决定驱逐/回滚） */
+  popPages: (tabId: string, steps: number) => ITabPage[]
+  /** 用给定页面替换整个栈（内部深拷贝页面） */
+  replacePages: (tabId: string, pages: readonly ITabPage[]) => void
+  clearPages: (tabId: string) => void
+  /** 修改页面字段（id / refreshVersion / _backParams），并触发 tabs 更新 */
+  updatePage: (tabId: string, pageId: string, patch: PagePatch) => boolean
+  /** 取出并清除栈顶页面的 _backParams；pageId 不是当前栈顶时返回 null */
+  consumeBackParams: (tabId: string, pageId: string) => Record<string, unknown> | null
+
+  // ---- 驱逐标记辅助 ----
+  isTabMarkedForEviction: (id: string) => boolean
+  isCacheMarkedForEviction: (id: string) => boolean
+  unmarkCacheForEviction: (id: string) => void
+  clearTabEvictionMarks: () => void
+
+  // ---- 组件注册表 ----
+  getComponent: (id: string) => DefineComponent | undefined
+  setComponent: (id: string, component: DefineComponent) => void
+  deleteComponent: (id: string) => void
+  snapshotComponents: () => Map<string, DefineComponent>
+  restoreComponents: (snapshot: Map<string, DefineComponent>) => void
+
+  // ---- 缓存快照 / 响应式 ----
+  snapshotCaches: () => string[]
+  restoreCaches: (cacheNames: readonly string[]) => void
+  /** 通知依赖 tabs 的计算属性重新求值（如 activePageRefreshVersion） */
+  touchTabs: () => void
+
+  // ---- 生命周期 ----
+  /** 清空 tabs / caches / components / 驱逐标记，供 destroy 使用 */
+  reset: () => void
+}
+
+/** 标签表中保存的纯净记录；active 由 activeTabId 派生 */
+interface TabRecord {
+  id: string
+  title: string
+  closable: boolean
+  refreshable: boolean
+  iframe: boolean
+  iframeRefreshMode?: 'postMessage' | 'reload'
+  url?: string
+}
+
+interface PageStackAccess {
+  getPages: (tabId: string) => readonly ITabPage[]
+  getTopPage: (tabId: string) => ITabPage | null
+  appendPage: (tabId: string, page: ITabPage) => void
+  popPages: (tabId: string, steps: number) => ITabPage[]
+  clearPages: (tabId: string) => void
+}
+
+/**
+ * 兼容视图：继承 Stack 以保持 ITabItem.pages 的类型不变，
+ * 所有读写都转发给 store 的规范化状态。
+ */
+class PageStackView extends Stack<ITabPage> {
+  private readonly tabId: string
+  private readonly access: PageStackAccess
+
+  constructor(tabId: string, access: PageStackAccess) {
+    super()
+    this.tabId = tabId
+    this.access = access
+  }
+
+  override push(page: ITabPage): void {
+    this.access.appendPage(this.tabId, page)
+  }
+
+  override pop(): ITabPage | undefined {
+    return this.access.popPages(this.tabId, 1)[0]
+  }
+
+  override peek(): ITabPage | undefined {
+    return this.access.getTopPage(this.tabId) ?? undefined
+  }
+
+  override at(index: number): ITabPage | undefined {
+    return this.access.getPages(this.tabId)[index]
+  }
+
+  override isEmpty(): boolean {
+    return this.access.getPages(this.tabId).length === 0
+  }
+
+  override size(): number {
+    return this.access.getPages(this.tabId).length
+  }
+
+  override clear(): void {
+    this.access.clearPages(this.tabId)
+  }
+
+  override list(): ITabPage[] {
+    return [...this.access.getPages(this.tabId)]
+  }
+
+  override readonlyList(): readonly ITabPage[] {
+    return this.access.getPages(this.tabId)
+  }
+
+  override find(predicate: (element: ITabPage, index: number) => boolean): ITabPage | undefined {
+    return this.list().find(predicate)
+  }
+
+  override findIndex(predicate: (element: ITabPage, index: number) => boolean): number {
+    return this.list().findIndex(predicate)
+  }
+
+  override filter(predicate: (element: ITabPage, index: number) => boolean): ITabPage[] {
+    return this.list().filter(predicate)
+  }
+
+  override some(predicate: (element: ITabPage, index: number) => boolean): boolean {
+    return this.list().some(predicate)
+  }
+
+  override forEachTopDown(visit: (element: ITabPage, index: number) => void): void {
+    const pages = this.list()
+    for (let index = pages.length - 1; index >= 0; index--) {
+      visit(pages[index] as ITabPage, index)
+    }
+  }
+
+  override toJSON(): ITabPage[] {
+    return this.list()
+  }
+
+  override toString(): string {
+    return this.list().toString()
+  }
+}
+
+const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
+  const { tabs, caches, components, cacheIdsToEvict, tabIdsToEvict } = context
+  const eviction = createTabPanelEviction(context)
+
+  // ---- 规范化状态 ----
+  const tabOrder = ref<string[]>([])
+  const tabsById = reactive(new Map<string, TabRecord>())
+  const pageIdsByTabId = reactive(new Map<string, string[]>())
+  const pagesById = reactive(new Map<string, ITabPage>())
+  const activeTabId = ref('')
+  /** 稳定的兼容视图，保证 TabHeader 等使用方的对象身份不变 */
+  const tabViews = new Map<string, ITabItem>()
+
+  // ---- 查询 ----
+  const getTabs = (): readonly ITabItem[] => tabs.value
+
+  const getTab = (id: string): ITabItem | null => tabs.value.find((tab) => tab.id === id) ?? null
+
+  const getActiveTab = (): ITabItem | null => tabs.value.find((tab) => tab.active) ?? null
+
+  const getPageIds = (tabId: string): readonly string[] => pageIdsByTabId.get(tabId) ?? []
+
+  const getPages = (tabId: string): readonly ITabPage[] => {
+    const ids = pageIdsByTabId.get(tabId)
+    if (!ids || ids.length === 0) return []
+    const pages: ITabPage[] = []
+    for (const id of ids) {
+      const page = pagesById.get(id)
+      if (page) pages.push(page)
+    }
+    return pages
+  }
+
+  const getTopPage = (tabId: string): ITabPage | null => {
+    const ids = pageIdsByTabId.get(tabId)
+    if (!ids || ids.length === 0) return null
+    return pagesById.get(ids[ids.length - 1] as string) ?? null
+  }
+
+  const findTabByTopPagePath = (path: string): ITabItem | null => {
+    for (const id of tabOrder.value) {
+      if (getTopPage(id)?.path === path) return getTab(id)
+    }
+    return null
+  }
+
+  const hasTab = (id: string): boolean => tabsById.has(id)
+
+  const canAddTab = (): boolean =>
+    context.maxTabCount.value <= 0 ||
+    (context.maxTabCount.value > 0 && context.maxTabCount.value > tabOrder.value.length)
+
+  const getPageSnapshot = (tabId: string): ITabPage[] =>
+    getPages(tabId).map((page) => clonePage(page))
+
+  // ---- 标签写入 ----
+  const toRecord = (tab: ITabItem): TabRecord => ({
+    id: tab.id,
+    title: tab.title,
+    closable: tab.closable,
+    refreshable: tab.refreshable,
+    iframe: tab.iframe,
+    iframeRefreshMode: tab.iframeRefreshMode,
+    url: tab.url
+  })
+
+  const registerTab = (tab: ITabItem): void => {
+    tabsById.set(tab.id, toRecord(tab))
+
+    const pages = tab.pages.list()
+    const pageIds = pages.map((page) => page.id)
+    for (const page of pages) pagesById.set(page.id, page)
+    pageIdsByTabId.set(tab.id, pageIds)
+
+    tabViews.delete(tab.id)
+    if (!tabOrder.value.includes(tab.id)) {
+      tabOrder.value = [...tabOrder.value, tab.id]
+    }
+    if (tab.active) activeTabId.value = tab.id
+  }
+
+  const addTab = (tab: ITabItem): void => {
+    registerTab(tab)
+    syncTabsView()
+  }
+
+  const addTabs = (newTabs: readonly ITabItem[]): void => {
+    if (newTabs.length === 0) return
+    for (const tab of newTabs) registerTab(tab)
+    syncTabsView()
+  }
+
+  const activateTab = (id: string): ITabItem | null => {
+    activeTabId.value = tabsById.has(id) ? id : ''
+    syncTabsView()
+    return getTab(id)
+  }
+
+  const moveTab = (id: string, targetIndex: number): boolean => {
+    const order = tabOrder.value
+    const sourceIndex = order.indexOf(id)
+    if (
+      sourceIndex < 0 ||
+      targetIndex < 0 ||
+      targetIndex >= order.length ||
+      sourceIndex === targetIndex
+    ) {
+      return false
+    }
+
+    const reordered = [...order]
+    const [tabId] = reordered.splice(sourceIndex, 1)
+    if (!tabId) return false
+    reordered.splice(targetIndex, 0, tabId)
+    tabOrder.value = reordered
+    syncTabsView()
+    return true
+  }
+
+  const removeTab = (id: string): RemoveTabResult => {
+    const order = tabOrder.value
+    const index = order.indexOf(id)
+    if (index < 0) return { status: 'not-found', removed: null, nextActiveId: '' }
+
+    const record = tabsById.get(id)
+    if (!record || !record.closable) {
+      return { status: 'not-closable', removed: null, nextActiveId: id }
+    }
+
+    const removed = materializeTab(id)
+    const wasActive = activeTabId.value === id
+    if (removed) eviction.markTabPagesForEviction(removed)
+
+    for (const pageId of getPageIds(id)) pagesById.delete(pageId)
+    pageIdsByTabId.delete(id)
+    tabsById.delete(id)
+    tabViews.delete(id)
+
+    let nextActiveId = ''
+    if (order.length > 1 && wasActive) {
+      nextActiveId = (index === 0 ? order[1] : order[index - 1]) ?? ''
+    }
+    if (wasActive) activeTabId.value = ''
+
+    tabOrder.value = order.filter((tabId) => tabId !== id)
+    syncTabsView()
+
+    // 非激活标签关闭后没有 onActivated 兜底，立即执行驱逐。
+    if (!wasActive) {
+      eviction.evictMarkedCaches()
+      tabIdsToEvict.clear()
+    }
+
+    return { status: 'removed', removed, nextActiveId }
+  }
+
+  const removeTabs = (shouldRemove: (tab: ITabItem, index: number) => boolean): ITabItem[] => {
+    const removed: ITabItem[] = []
+    const remaining: string[] = []
+
+    tabOrder.value.forEach((id, index) => {
+      const record = tabsById.get(id)
+      const tab = materializeTab(id)
+      if (!record || !tab) return
+      if (!record.closable || !shouldRemove(tab, index)) {
+        remaining.push(id)
+        return
+      }
+
+      eviction.markTabPagesForEviction(tab)
+      for (const pageId of getPageIds(id)) pagesById.delete(pageId)
+      pageIdsByTabId.delete(id)
+      tabsById.delete(id)
+      tabViews.delete(id)
+      if (activeTabId.value === id) activeTabId.value = ''
+      removed.push(tab)
+    })
+
+    tabOrder.value = remaining
+    syncTabsView()
+    return removed
+  }
+
+  // ---- 页面栈写入 ----
+  const appendPage = (tabId: string, page: ITabPage): void => {
+    if (!tabsById.has(tabId)) return
+    const ids = pageIdsByTabId.get(tabId) ?? []
+    pageIdsByTabId.set(tabId, [...ids, page.id])
+    pagesById.set(page.id, page)
+    syncTabsView()
+  }
+
+  const popPages = (tabId: string, steps: number): ITabPage[] => {
+    if (!tabsById.has(tabId) || steps <= 0) return []
+
+    const ids = [...(pageIdsByTabId.get(tabId) ?? [])]
+    const popped: ITabPage[] = []
+    for (let index = 0; index < steps; index++) {
+      const pageId = ids.pop()
+      if (!pageId) break
+      const page = pagesById.get(pageId)
+      if (page) popped.push(page)
+      pagesById.delete(pageId)
+    }
+    pageIdsByTabId.set(tabId, ids)
+    syncTabsView()
+    return popped
+  }
+
+  const replacePages = (tabId: string, pages: readonly ITabPage[]): void => {
+    if (!tabsById.has(tabId)) return
+
+    for (const pageId of getPageIds(tabId)) pagesById.delete(pageId)
+    const nextPageIds: string[] = []
+    for (const page of pages) {
+      const cloned = clonePage(page)
+      pagesById.set(cloned.id, cloned)
+      nextPageIds.push(cloned.id)
+    }
+    pageIdsByTabId.set(tabId, nextPageIds)
+    syncTabsView()
+  }
+
+  const clearPages = (tabId: string): void => {
+    if (!tabsById.has(tabId)) return
+    for (const pageId of getPageIds(tabId)) pagesById.delete(pageId)
+    pageIdsByTabId.set(tabId, [])
+    syncTabsView()
+  }
+
+  const updatePage = (tabId: string, pageId: string, patch: PagePatch): boolean => {
+    const ids = pageIdsByTabId.get(tabId)
+    if (!ids || !ids.includes(pageId)) return false
+
+    const page = pagesById.get(pageId)
+    if (!page) return false
+
+    Object.assign(page, patch)
+    if (patch.id && patch.id !== pageId) {
+      pagesById.delete(pageId)
+      pagesById.set(patch.id, page)
+      pageIdsByTabId.set(
+        tabId,
+        ids.map((id) => (id === pageId ? (patch.id as string) : id))
+      )
+    }
+    syncTabsView()
+    return true
+  }
+
+  const consumeBackParams = (tabId: string, pageId: string): Record<string, unknown> | null => {
+    const top = getTopPage(tabId)
+    if (!top || top.id !== pageId || !top._backParams) return null
+    const backParams = { ...top._backParams }
+    delete top._backParams
+    syncTabsView()
+    return backParams
+  }
+
+  // ---- 缓存与组件注册表 ----
+  const snapshotCaches = (): string[] => [...caches.value]
+
+  const restoreCaches = (cacheNames: readonly string[]): void => {
+    caches.value = [...cacheNames]
+  }
+
+  const snapshotComponents = (): Map<string, DefineComponent> => new Map(components)
+
+  const restoreComponents = (snapshot: Map<string, DefineComponent>): void => {
+    components.clear()
+    for (const [id, component] of snapshot) components.set(id, component)
+  }
+
+  const reset = (): void => {
+    tabOrder.value = []
+    tabsById.clear()
+    pageIdsByTabId.clear()
+    pagesById.clear()
+    tabViews.clear()
+    activeTabId.value = ''
+    tabs.value = []
+    caches.value = []
+    components.clear()
+    cacheIdsToEvict.clear()
+    tabIdsToEvict.clear()
+  }
+
+  // ---- 兼容视图 ----
+  const pageAccess: PageStackAccess = {
+    getPages,
+    getTopPage,
+    appendPage,
+    popPages,
+    clearPages
+  }
+
+  function materializeTab(id: string): ITabItem | null {
+    const record = tabsById.get(id)
+    if (!record) return null
+
+    let view = tabViews.get(id)
+    if (!view) {
+      view = {
+        id: record.id,
+        title: record.title,
+        closable: record.closable,
+        refreshable: record.refreshable,
+        iframe: record.iframe,
+        iframeRefreshMode: record.iframeRefreshMode,
+        url: record.url,
+        active: activeTabId.value === id,
+        pages: new PageStackView(id, pageAccess)
+      }
+      tabViews.set(id, view)
+    } else {
+      view.title = record.title
+      view.closable = record.closable
+      view.refreshable = record.refreshable
+      view.iframe = record.iframe
+      view.active = activeTabId.value === id
+      if (record.iframeRefreshMode === undefined) {
+        delete view.iframeRefreshMode
+      } else {
+        view.iframeRefreshMode = record.iframeRefreshMode
+      }
+      if (record.url === undefined) {
+        delete view.url
+      } else {
+        view.url = record.url
+      }
+    }
+    return view
+  }
+
+  function syncTabsView(): void {
+    const next: ITabItem[] = []
+    for (const id of tabOrder.value) {
+      const view = materializeTab(id)
+      if (view) next.push(view)
+    }
+    tabs.value = next
+  }
+
+  return {
+    ...eviction,
+    getTabs,
+    getTab,
+    getActiveTab,
+    findTabByTopPagePath,
+    hasTab,
+    canAddTab,
+    getPages,
+    getTopPage,
+    getPageSnapshot,
+    addTab,
+    addTabs,
+    activateTab,
+    moveTab,
+    removeTab,
+    removeTabs,
+    appendPage,
+    popPages,
+    replacePages,
+    clearPages,
+    updatePage,
+    consumeBackParams,
+    isTabMarkedForEviction: (id) => tabIdsToEvict.has(id),
+    isCacheMarkedForEviction: (id) => cacheIdsToEvict.has(id),
+    unmarkCacheForEviction: (id) => cacheIdsToEvict.delete(id),
+    clearTabEvictionMarks: () => tabIdsToEvict.clear(),
+    getComponent: (id) => components.get(id),
+    setComponent: (id, component) => components.set(id, component),
+    deleteComponent: (id) => components.delete(id),
+    snapshotComponents,
+    restoreComponents,
+    snapshotCaches,
+    restoreCaches,
+    touchTabs: syncTabsView,
+    reset
+  }
+}
+
+const storesByContext = new WeakMap<StackTabsRuntimeContext, TabStoreApi>()
+
+/**
+ * 每个运行时上下文只创建一个 store。
+ *
+ * useTabPanel 会被 StackKeepAlive、StackCacheRenderer、页面内的 useTabRouter 多次调用；
+ * 复用同一实例可避免 eviction 的 Set/数组出现多份互相不同步的状态。
+ */
+export const getTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
+  const existing = storesByContext.get(context)
+  if (existing) return existing
+
+  const store = createTabStore(context)
+  storesByContext.set(context, store)
+  return store
+}

package/src/lib/hooks/useTabActions.ts

@@ -37,6 +37,7 @@ export default function useTabActions(providedRuntimeContext?: StackTabsRuntimeC
     canAddTab,
     renewTab,
     getTab,
+    getTopPage,
     tabs,
     moveTab,
     removeTab,
@@ -152,8 +153,7 @@ export default function useTabActions(providedRuntimeContext?: StackTabsRuntimeC
     target: { tabId?: string; pageId?: string } = {}
   ): HTMLElement | undefined => {
     if (typeof document === 'undefined') return undefined
-    const pageId =
-      target.pageId ?? (target.tabId ? getTab(target.tabId)?.pages.peek()?.id : undefined)
+    const pageId = target.pageId ?? (target.tabId ? getTopPage(target.tabId)?.id : undefined)
     if (pageId) return document.getElementById(`W-${pageId}`) ?? undefined
     return document.querySelector<HTMLElement>('.cache-page-wrapper') ?? undefined
   }