vue-stack-tabs 1.3.1 → 1.4.2

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/useContextMenu.ts

@@ -19,29 +19,75 @@ export default () => {
   /** 菜单是否显示 */
   const shown = ref<boolean>(false)
 
-  /** 点击菜单外部时关闭菜单并移除监听 */
+  /** 关闭菜单并清理全局事件。 */
+  const hideContextMenu = () => {
+    shown.value = false
+    document.removeEventListener('click', handleClickOutside)
+    document.removeEventListener('focusin', handleDocumentFocusIn, true)
+    window.removeEventListener('blur', handleWindowBlur)
+  }
+
+  /**
+   * 记录最近一次 showContextMenu 触发的时间戳。contextmenu 派发后部分浏览器
+   * 会再派发一次 click 事件；如果 click 时间与 contextmenu 太近，则忽略本次 click，
+   * 避免菜单刚显示就被自身点击触发 handleClickOutside 关闭。
+   * 同时也是上一轮 await nextTick() 双跳方案之外的兜底：nextTick 在极端时序下
+   * 仍可能晚于同一帧的 click 派发。
+   */
+  let lastContextMenuAt = 0
+  /** 触发菜单后 BUBBLE_GUARD_MS 毫秒内的 click 视为「同一手势」，不关闭菜单 */
+  const BUBBLE_GUARD_MS = 250
+
+  /** 点击菜单外部时关闭菜单。 */
   const handleClickOutside = (ev: MouseEvent) => {
     const target = ev.target as Element
     if (target.closest?.('.stack-tab__contextmenu')) return
-    shown.value = false
-    document.removeEventListener('click', handleClickOutside)
+    // 同一手势的 click 仍在守卫窗口内，跳过关闭判断。
+    if (Date.now() - lastContextMenuAt < BUBBLE_GUARD_MS) return
+    hideContextMenu()
+  }
+
+  /**
+   * iframe 内的点击不会冒泡到父页面，但 iframe 自身会在父文档中获得焦点。
+   * 捕获 focusin 仅处理该元素，避免 window.blur 干扰菜单内部的焦点管理。
+   */
+  const handleDocumentFocusIn = (event: FocusEvent) => {
+    if (event.target instanceof HTMLIFrameElement) hideContextMenu()
+  }
+
+  /**
+   * 部分浏览器不会把 iframe 内部点击的 focusin 派发到父文档；此时父窗口
+   * 会失焦。等待焦点完成切换后，只在 activeElement 确实为 iframe 时收起。
+   */
+  const handleWindowBlur = () => {
+    window.requestAnimationFrame(() => {
+      if (document.activeElement instanceof HTMLIFrameElement) hideContextMenu()
+    })
   }
 
   onUnmounted(() => {
-    document.removeEventListener('click', handleClickOutside)
+    hideContextMenu()
   })
 
-  /** 显示右键菜单；nextTick 后设置位置与数据，避免与关闭逻辑冲突 */
+  /** 显示右键菜单；nextTick 后设置位置与数据，再下一拍挂载外部点击监听，避免与关闭逻辑冲突 */
   const showContextMenu = async (e: MouseEvent, item: ITabItem, index: number, max: number) => {
+    // 先更新守卫时间戳，确保紧随其后的 click 事件被 handleClickOutside 忽略。
+    lastContextMenuAt = Date.now()
     shown.value = false
     document.removeEventListener('click', handleClickOutside)
+    document.removeEventListener('focusin', handleDocumentFocusIn, true)
+    window.removeEventListener('blur', handleWindowBlur)
 
-    await nextTick(() => {
-      const { clientY: top, clientX: left } = e
-      shown.value = true
-      Object.assign(contextMenuData, { item, index, top, left, max })
-      nextTick(() => document.addEventListener('click', handleClickOutside))
-    })
+    await nextTick()
+    const { clientY: top, clientX: left } = e
+    shown.value = true
+    Object.assign(contextMenuData, { item, index, top, left, max })
+
+    // 等下一拍再挂载 click 监听，避免本次触发 showContextMenu 的同一 click 事件被立即关闭。
+    await nextTick()
+    document.addEventListener('click', handleClickOutside)
+    document.addEventListener('focusin', handleDocumentFocusIn, true)
+    window.addEventListener('blur', handleWindowBlur)
   }
 
   return {