vue-stack-tabs 1.4.2 → 2.2.0

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

@@ -12,7 +12,7 @@
  * 注意：本模块不依赖 vue-router，也不触发业务事件；路由事务与事件由 useTabPanel /
  * useTabRouter 等上层编排。
  */
-import { reactive, ref } from 'vue'
+import { markRaw, reactive, ref } from 'vue'
 import type { DefineComponent } from 'vue'
 import type { ITabItem, ITabPage } from '../../model/TabModel'
 import { Stack } from '../../model/TabModel'
@@ -27,6 +27,12 @@ export interface RemoveTabResult {
   nextActiveId: string
 }
 
+export interface PageUpdate {
+  tabId: string
+  pageId: string
+  patch: PagePatch
+}
+
 /** updatePage 允许修改的字段；页面身份与刷新版本必须通过 store 写入 */
 export interface PagePatch {
   id?: string
@@ -46,6 +52,8 @@ export interface TabStoreApi extends TabPanelEvictionApi {
   canAddTab: () => boolean
   getPages: (tabId: string) => readonly ITabPage[]
   getTopPage: (tabId: string) => ITabPage | null
+  /** 读取任意页面的刷新版本；渲染层据此只重建对应页面 */
+  getPageRefreshVersion: (pageId: string) => number
   /** 返回深拷贝的页面栈快照，可直接用于 rollback */
   getPageSnapshot: (tabId: string) => ITabPage[]
 
@@ -54,6 +62,8 @@ export interface TabStoreApi extends TabPanelEvictionApi {
   addTabs: (tabs: readonly ITabItem[]) => void
   /** 唯一 active 写入口 */
   activateTab: (id: string) => ITabItem | null
+  /** 动态更新标签标题；返回 false 表示标签不存在 */
+  updateTabTitle: (id: string, title: string) => boolean
   moveTab: (id: string, targetIndex: number) => boolean
   removeTab: (id: string) => RemoveTabResult
   removeTabs: (shouldRemove: (tab: ITabItem, index: number) => boolean) => ITabItem[]
@@ -65,8 +75,10 @@ export interface TabStoreApi extends TabPanelEvictionApi {
   /** 用给定页面替换整个栈（内部深拷贝页面） */
   replacePages: (tabId: string, pages: readonly ITabPage[]) => void
   clearPages: (tabId: string) => void
-  /** 修改页面字段（id / refreshVersion / _backParams），并触发 tabs 更新 */
+  /** 修改页面字段（id / refreshVersion / _backParams）；仅 id 变化时重建 tabs 数组 */
   updatePage: (tabId: string, pageId: string, patch: PagePatch) => boolean
+  /** 批量修改页面字段，最后最多重建一次 tabs 数组（供 refreshAllTabs 使用） */
+  updatePages: (updates: readonly PageUpdate[]) => void
   /** 取出并清除栈顶页面的 _backParams；pageId 不是当前栈顶时返回 null */
   consumeBackParams: (tabId: string, pageId: string) => Record<string, unknown> | null
 
@@ -103,11 +115,15 @@ interface TabRecord {
   iframe: boolean
   iframeRefreshMode?: 'postMessage' | 'reload'
   url?: string
+  /** 固定在标签栏最前方，不可拖动，其他标签也不能排到它前面 */
+  pinned?: boolean
 }
 
 interface PageStackAccess {
   getPages: (tabId: string) => readonly ITabPage[]
   getTopPage: (tabId: string) => ITabPage | null
+  /** 读取任意页面的刷新版本；渲染层据此只重建对应页面 */
+  getPageRefreshVersion: (pageId: string) => number
   appendPage: (tabId: string, page: ITabPage) => void
   popPages: (tabId: string, steps: number) => ITabPage[]
   clearPages: (tabId: string) => void
@@ -211,6 +227,7 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
   // ---- 查询 ----
   const getTabs = (): readonly ITabItem[] => tabs.value
 
+  // 返回 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
@@ -234,9 +251,13 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
     return pagesById.get(ids[ids.length - 1] as string) ?? null
   }
 
+  const getPageRefreshVersion = (pageId: string): number =>
+    pagesById.get(pageId)?.refreshVersion ?? 0
+
   const findTabByTopPagePath = (path: string): ITabItem | null => {
+    // 直接遍历 tabViews，避免原先「getTopPage + getTab(find)」的 O(n²) 组合。
     for (const id of tabOrder.value) {
-      if (getTopPage(id)?.path === path) return getTab(id)
+      if (getTopPage(id)?.path === path) return tabViews.get(id) ?? null
     }
     return null
   }
@@ -258,7 +279,8 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
     refreshable: tab.refreshable,
     iframe: tab.iframe,
     iframeRefreshMode: tab.iframeRefreshMode,
-    url: tab.url
+    url: tab.url,
+    pinned: tab.pinned
   })
 
   const registerTab = (tab: ITabItem): void => {
@@ -293,22 +315,37 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
     return getTab(id)
   }
 
+  const updateTabTitle = (id: string, title: string): boolean => {
+    const record = tabsById.get(id)
+    if (!record) return false
+    if (record.title === title) return true
+    record.title = title
+    syncTabsView()
+    return true
+  }
+
   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
-    ) {
+    if (sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) {
       return false
     }
 
+    // pinned 标签（home）固定在最前方：自身不可移动，其他标签也不得插到它前面。
+    const sourceRecord = tabsById.get(id)
+    if (!sourceRecord || sourceRecord.pinned) return false
+
+    let firstUnpinnedIndex = 0
+    for (let index = 0; index < order.length; index++) {
+      if (tabsById.get(order[index] as string)?.pinned) firstUnpinnedIndex = index + 1
+    }
+    const safeTargetIndex = Math.max(targetIndex, firstUnpinnedIndex)
+    if (safeTargetIndex >= order.length || safeTargetIndex === sourceIndex) return false
+
     const reordered = [...order]
     const [tabId] = reordered.splice(sourceIndex, 1)
     if (!tabId) return false
-    reordered.splice(targetIndex, 0, tabId)
+    reordered.splice(safeTargetIndex, 0, tabId)
     tabOrder.value = reordered
     syncTabsView()
     return true
@@ -425,12 +462,17 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
     syncTabsView()
   }
 
-  const updatePage = (tabId: string, pageId: string, patch: PagePatch): boolean => {
+  const applyPagePatch = (
+    tabId: string,
+    pageId: string,
+    patch: PagePatch
+  ): 'missing' | 'conflict' | 'same-id' | 'new-id' => {
     const ids = pageIdsByTabId.get(tabId)
-    if (!ids || !ids.includes(pageId)) return false
+    if (!ids || !ids.includes(pageId)) return 'missing'
 
     const page = pagesById.get(pageId)
-    if (!page) return false
+    if (!page) return 'missing'
+    if (patch.id && patch.id !== pageId && pagesById.has(patch.id)) return 'conflict'
 
     Object.assign(page, patch)
     if (patch.id && patch.id !== pageId) {
@@ -440,11 +482,32 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
         tabId,
         ids.map((id) => (id === pageId ? (patch.id as string) : id))
       )
+      return 'new-id'
     }
-    syncTabsView()
+    return 'same-id'
+  }
+
+  /**
+   * 刷新版本、_backParams 都是 page 上的响应式字段，读取方会自行更新；
+   * 只有页面 id 变化才需要重建 tabs 视图，避免刷新一个标签就 diff 整个标签栏。
+   */
+  const updatePage = (tabId: string, pageId: string, patch: PagePatch): boolean => {
+    const result = applyPagePatch(tabId, pageId, patch)
+    if (result === 'missing' || result === 'conflict') return false
+    if (result === 'new-id') syncTabsView()
     return true
   }
 
+  const updatePages = (updates: readonly PageUpdate[]): void => {
+    let needsSync = false
+    for (const update of updates) {
+      if (applyPagePatch(update.tabId, update.pageId, update.patch) === 'new-id') {
+        needsSync = true
+      }
+    }
+    if (needsSync) syncTabsView()
+  }
+
   const consumeBackParams = (tabId: string, pageId: string): Record<string, unknown> | null => {
     const top = getTopPage(tabId)
     if (!top || top.id !== pageId || !top._backParams) return null
@@ -486,6 +549,7 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
   const pageAccess: PageStackAccess = {
     getPages,
     getTopPage,
+    getPageRefreshVersion,
     appendPage,
     popPages,
     clearPages
@@ -506,7 +570,9 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
         iframeRefreshMode: record.iframeRefreshMode,
         url: record.url,
         active: activeTabId.value === id,
-        pages: new PageStackView(id, pageAccess)
+        // pages 的读写都转发给 store，本身不需要被 ref 深度代理。
+        pages: markRaw(new PageStackView(id, pageAccess)),
+        pinned: record.pinned
       }
       tabViews.set(id, view)
     } else {
@@ -515,6 +581,7 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
       view.refreshable = record.refreshable
       view.iframe = record.iframe
       view.active = activeTabId.value === id
+      view.pinned = record.pinned
       if (record.iframeRefreshMode === undefined) {
         delete view.iframeRefreshMode
       } else {
@@ -548,10 +615,12 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
     canAddTab,
     getPages,
     getTopPage,
+    getPageRefreshVersion,
     getPageSnapshot,
     addTab,
     addTabs,
     activateTab,
+    updateTabTitle,
     moveTab,
     removeTab,
     removeTabs,
@@ -560,6 +629,7 @@ const createTabStore = (context: StackTabsRuntimeContext): TabStoreApi => {
     replacePages,
     clearPages,
     updatePage,
+    updatePages,
     consumeBackParams,
     isTabMarkedForEviction: (id) => tabIdsToEvict.has(id),
     isCacheMarkedForEviction: (id) => cacheIdsToEvict.has(id),

package/src/lib/hooks/useContextMenu.ts

@@ -41,7 +41,7 @@ export default () => {
   /** 点击菜单外部时关闭菜单。 */
   const handleClickOutside = (ev: MouseEvent) => {
     const target = ev.target as Element
-    if (target.closest?.('.stack-tab__contextmenu')) return
+    if (target.closest?.('.stack-tab__context-menu')) return
     // 同一手势的 click 仍在守卫窗口内，跳过关闭判断。
     if (Date.now() - lastContextMenuAt < BUBBLE_GUARD_MS) return
     hideContextMenu()

package/src/lib/hooks/useIframeManager.ts

@@ -137,10 +137,17 @@ export function useIframeManager(options: UseIframeManagerOptions) {
     }
   }
 
-  /** 同步 iframe 激活和移除状态，避免用多个 watcher 重复遍历 iframe 列表。 */
+  /**
+   * 同步 iframe 激活和移除状态。
+   * 只监听 id:active 签名，普通标签的标题/页面栈变化不会触发遍历。
+   */
+  const iframeActivationSignature = computed(() =>
+    iframeTabs.value.map((frame) => `${frame.id}:${frame.active ? 1 : 0}`).join('|')
+  )
   watch(
-    () => iframeTabs.value.map((frame) => ({ id: frame.id, active: frame.active })),
-    (frames) => {
+    iframeActivationSignature,
+    () => {
+      const frames = iframeTabs.value
       for (const f of frames) {
         if (!f.active) continue
         iframeEverActivated[f.id] = true

package/src/lib/hooks/useTabActions.ts

@@ -2,7 +2,7 @@ import { isNavigationFailure, useRouter } from 'vue-router'
 import type { LocationQueryRaw } from 'vue-router'
 import { defu } from 'defu'
 import useTabPanel from './useTabPanel'
-import { encodeTabInfo } from '../utils/tabInfoEncoder'
+import { createId, encodeTabInfo } from '../utils/tabInfoEncoder'
 import {
   parseUrl,
   isCrossOriginUrl,
@@ -31,6 +31,7 @@ export default function useTabActions(providedRuntimeContext?: StackTabsRuntimeC
   const runtimeContext = providedRuntimeContext ?? resolveStackTabsRuntimeContext()
   const {
     active,
+    updateTabTitle,
     hasTab,
     refreshKey,
     reset,
@@ -61,7 +62,7 @@ export default function useTabActions(providedRuntimeContext?: StackTabsRuntimeC
       defaults.iframeRefreshMode = (tab.iframeRefreshMode ?? 'postMessage') as IframeRefreshMode
     }
     const info = defu(tab, defaults)
-    if (!info.id) info.id = crypto.randomUUID()
+    if (!info.id) info.id = createId()
     return info
   }
 
@@ -111,10 +112,12 @@ export default function useTabActions(providedRuntimeContext?: StackTabsRuntimeC
     const tabQuery = omitStackTabsReservedQuery(tab.query)
     let query = defu(tabQuery, { __tab }) as LocationQueryRaw
     let path: string
+    let hash: string | undefined
 
     if (!tab.iframe) {
       const url = parseUrl(tab.path)
       path = url.path
+      hash = url.hash || undefined
       query = defu(omitStackTabsReservedQuery(url.query), query, { __tab }) as LocationQueryRaw
       query = {
         ...query,
@@ -132,7 +135,7 @@ export default function useTabActions(providedRuntimeContext?: StackTabsRuntimeC
     if (!isAllowedTabUrl(tab.path)) return Promise.reject(new Error('Invalid tab URL'))
     return runNavigationTransaction({
       apply: () => undefined,
-      navigate: () => router.push({ path, query }),
+      navigate: () => router.push({ path, query, hash }),
       rollback: () => undefined,
       isFailureResult: isNavigationFailure,
       rejectFailureResult: true
@@ -155,7 +158,7 @@ export default function useTabActions(providedRuntimeContext?: StackTabsRuntimeC
     if (typeof document === 'undefined') return 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
+    return document.querySelector<HTMLElement>('.stack-tab__cache-page-wrapper') ?? undefined
   }
 
   /** iframe 标签在新窗口打开（无法嵌入时降级） */
@@ -181,6 +184,7 @@ export default function useTabActions(providedRuntimeContext?: StackTabsRuntimeC
     // 激活与重置
     activeTab: active,
     moveTab,
+    updateTabTitle,
     reset,
 
     // 数据与配置