vue-stack-tabs 1.1.0 → 1.3.1

package/src/lib/assets/style/stackTab.scss

@@ -14,6 +14,14 @@
     position: relative;
     overflow: hidden;
   }
+  &__keep-alive-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   /*缓存页面wrapper*/
   .cache-page-wrapper {
     width: 100%;
@@ -75,6 +83,12 @@
       cursor: pointer;
       display: flex;
       align-items: center;
+      border: 0;
+      padding: 0;
+      color: inherit;
+      font: inherit;
+      text-align: inherit;
+      appearance: none;
 
       //按钮禁用样式
       &[disabled] {
@@ -150,7 +164,7 @@
     position: relative;
     display: inline-flex;
     height: 100%;
-    padding: 0;
+    padding: 0 16px 0 0;
     margin: 0;
     list-style: none;
     flex-wrap: nowrap;
@@ -183,6 +197,31 @@
       border-left: $stack-tab-border;
     }
 
+    &.is-dragging {
+      opacity: 0.55;
+    }
+
+    &.is-drop-before::before,
+    &.is-drop-after::after {
+      position: absolute;
+      z-index: 2;
+      top: 2px;
+      bottom: 2px;
+      width: 5px;
+      content: '';
+      background: $stack-tab-color-primary;
+      border-radius: 2px;
+      box-shadow: 0 0 6px rgba($stack-tab-color-primary, 0.8);
+    }
+
+    &.is-drop-before::before {
+      left: -3px;
+    }
+
+    &.is-drop-after::after {
+      right: -3px;
+    }
+
     /*
     激活右键菜单的页签
      */
@@ -216,6 +255,22 @@
       }
     }
 
+    &-tab {
+      display: flex;
+      flex: 1 1 auto;
+      min-width: 0;
+      height: 100%;
+      padding: 0;
+      color: inherit;
+      cursor: inherit;
+      background: transparent;
+      border: 0;
+      font: inherit;
+      text-align: inherit;
+      appearance: none;
+      align-items: center;
+    }
+
     /*
     页签标题
      */
@@ -247,6 +302,10 @@
       width: 0;
       background-color: $stack-tab-text-color;
       transition: $stack-tab__trans;
+      border: 0;
+      font: inherit;
+      appearance: none;
+      padding: 0;
 
       &:hover {
         background-color: $stack-tab-color-primary;
@@ -299,17 +358,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    pointer-events: none; /* 允许鼠标事件穿透到下层，避免遮挡其他标签 */
-    /* 进入的 iframe 置于上层；延迟进入，等待其他 tab 离开动画完成后再播放入场 */
-    .stack-tab-swap-enter-active {
-      z-index: 1;
-      transition-duration: 0.5s;
-      transition-delay: 0.3s;
-    }
-    .stack-tab-swap-leave-active {
-      z-index: 0;
-      position: absolute;
-    }
+    pointer-events: none;
   }
 
   &__iframe-wrapper {
@@ -347,6 +396,39 @@
       font-size: var(--stack-tab-font-size, 14px);
     }
   }
+
+  &__iframe-error {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    pointer-events: auto;
+    background: var(--stack-tab-iframe-error-bg, rgb(255 255 255 / 92%));
+    box-sizing: border-box;
+
+    &-text {
+      color: var(--stack-tab-iframe-error-color, #666);
+      font-size: var(--stack-tab-font-size, 14px);
+    }
+
+    &-retry,
+    &-open {
+      border: $stack-tab-border;
+      padding: 4px 10px;
+      color: $stack-tab-text-color;
+      cursor: pointer;
+      background: $stack-tab-background-color-base;
+      border-radius: 6px;
+      font: inherit;
+    }
+  }
   /*
   右键菜单
    */
@@ -367,16 +449,27 @@
       display: flex;
       position: relative;
       align-items: center;
+      justify-content: flex-start;
+      width: 100%;
+      min-height: 30px;
+      margin: 0;
       padding: 0 10px;
       line-height: 30px;
+      font: inherit;
+      text-align: inherit;
+      appearance: none;
+      box-sizing: border-box;
       color: $stack-tab-text-color;
       cursor: pointer;
+      background: transparent;
+      border: 0;
       border-radius: 10px 0;
       transition: all 0.2s ease-in-out;
       user-select: none;
 
       &:hover,
-      &:active {
+      &:active,
+      &:focus-visible {
         color: $stack-tab-color-white;
         background-color: $stack-tab-color-primary;
 
@@ -385,6 +478,10 @@
         }
       }
 
+      &:focus {
+        outline: none;
+      }
+
       &[disabled] {
         color: $stack-tab-color-disabled;
         pointer-events: none;

package/src/lib/components/ContextMenu/ContextMenuItem.vue

@@ -4,19 +4,31 @@
   职责：展示图标和标题，支持 disabled 状态
 -->
 <template>
-  <div class="stack-tab__contextmenu-item">
-    <div class="stack-tab__contextmenu-icon" :class="icon"></div>
-    <div style="margin-left: 8px" @contextmenu.prevent>{{ title }}</div>
-  </div>
+  <button type="button" role="menuitem" class="stack-tab__contextmenu-item" :disabled="disabled">
+    <span class="stack-tab__contextmenu-icon" :class="icon" aria-hidden="true" />
+    <span class="stack-tab__contextmenu-title" @contextmenu.prevent>{{ title }}</span>
+  </button>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  /** 图标 class，如 stack-tab__icon-reload svg-mask */
-  icon?: string
-  /** 显示文本 */
-  title: string
-}>()
+withDefaults(
+  defineProps<{
+    /** 图标 class，如 stack-tab__icon-reload svg-mask */
+    icon?: string
+    /** 显示文本 */
+    title: string
+    /** 是否禁用 */
+    disabled?: boolean
+  }>(),
+  {
+    icon: '',
+    disabled: false
+  }
+)
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.stack-tab__contextmenu-title {
+  margin-left: 8px;
+}
+</style>

package/src/lib/components/ContextMenu/index.vue

@@ -8,16 +8,19 @@
   <div
     ref="menuElementRef"
     class="stack-tab__contextmenu"
+    role="menu"
+    tabindex="-1"
     :style="{
       left: `${menuPosition.left}px`,
       top: `${menuPosition.top}px`,
       'z-index': getMaxZIndex('.stack-tab,.stack-tab *')
     }"
+    @keydown="handleMenuKeydown"
   >
     <context-menu-item
       icon="stack-tab__icon-reload svg-mask"
       :title="t('VueStackTab.reload')"
-      :disabled="!tabItem.refreshable ? 'disabled' : null"
+      :disabled="!tabItem.refreshable"
       @click="handleMenuItemClick(() => refreshTab(tabItem.id))"
     />
     <context-menu-item
@@ -28,19 +31,19 @@
     <context-menu-item
       icon="stack-tab__icon-close svg-mask"
       :title="t('VueStackTab.close')"
-      :disabled="!tabItem.closable ? 'disabled' : null"
+      :disabled="!tabItem.closable"
       @click="handleMenuItemClick(() => closeTab(tabItem.id))"
     />
     <context-menu-item
       icon="stack-tab__icon-close-lefts svg-mask"
       :title="t('VueStackTab.closeLeft')"
-      :disabled="index <= 0 ? 'disabled' : null"
+      :disabled="index <= 0"
       @click="handleMenuItemClick(() => removeLeftTabs(tabItem.id))"
     />
     <context-menu-item
       icon="stack-tab__icon-close-rights svg-mask"
       :title="t('VueStackTab.closeRight')"
-      :disabled="index >= max - 1 ? 'disabled' : null"
+      :disabled="index >= max - 1"
       @click="handleMenuItemClick(() => removeRightTabs(tabItem.id))"
     />
     <context-menu-item
@@ -62,20 +65,23 @@
     <div
       v-if="contextMenu !== undefined && contextMenu.length > 0"
       class="divider div-transparent"
+      role="separator"
+      aria-orientation="horizontal"
     ></div>
     <context-menu-item
-      v-for="(item, menuIndex) in contextMenu"
-      :key="menuIndex"
+      v-for="item in contextMenu"
+      :key="getCustomMenuKey(item)"
+      :data-menu-key="getCustomMenuKey(item)"
       :icon="item.icon"
       :title="item.title"
-      :disabled="item.disabled(tabItem) ? 'disabled' : null"
+      :disabled="item.disabled(tabItem)"
       @click="handleMenuItemClick(() => !item.disabled(tabItem) && item.callback(tabItem.id))"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, nextTick } from 'vue'
 import type { ITabItem, IContextMenu } from '../../model/TabModel'
 import { useI18n } from 'vue-i18n-lite'
 import { getMaxZIndex } from '../../utils/scrollUtils'
@@ -89,13 +95,15 @@ const props = withDefaults(
     left?: number
     top?: number
     contextMenu?: Array<IContextMenu>
+    restoreFocusElement?: HTMLElement | null
     tabItem: ITabItem
     max: number
   }>(),
   {
     left: 0,
     top: 0,
-    contextMenu: () => []
+    contextMenu: () => [],
+    restoreFocusElement: null
   }
 )
 const emit = defineEmits<{ close: [] }>()
@@ -107,17 +115,93 @@ const menuPosition = reactive({ left: props.left, top: props.top })
 const { closeTab, closeAllTabs, refreshTab, refreshAllTabs, openInNewWindow } = useTabActions()
 const { removeLeftTabs, removeRightTabs, removeOtherTabs } = useTabPanel()
 
+const focusActiveTabFallback = () => {
+  const activeTab = document.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')
+  activeTab?.focus()
+}
+
+const restoreFocusToTrigger = () => {
+  if (props.restoreFocusElement && document.contains(props.restoreFocusElement)) {
+    props.restoreFocusElement.focus()
+    return
+  }
+
+  focusActiveTabFallback()
+}
+
+const closeMenu = () => {
+  emit('close')
+  void nextTick(restoreFocusToTrigger)
+}
+
 /** 菜单项点击：执行回调并关闭菜单 */
 const handleMenuItemClick = (fn?: () => void) => {
   fn?.()
-  emit('close')
+  closeMenu()
+}
+
+const getMenuButtons = (): HTMLButtonElement[] => {
+  const root = menuElementRef.value
+  if (!root) return []
+  return Array.from(root.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')).filter(
+    (button) => !button.disabled
+  )
 }
+
+const focusMenuItem = (index: number) => {
+  const buttons = getMenuButtons()
+  if (buttons.length <= 0) return
+  const safeIndex = (index + buttons.length) % buttons.length
+  buttons[safeIndex]?.focus()
+}
+
+const getFocusedMenuItemIndex = (): number => {
+  const buttons = getMenuButtons()
+  return buttons.findIndex((button) => button === document.activeElement)
+}
+
+const handleMenuKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    closeMenu()
+    return
+  }
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    const focusedIndex = getFocusedMenuItemIndex()
+    focusMenuItem(focusedIndex === -1 ? 0 : focusedIndex + 1)
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    const focusedIndex = getFocusedMenuItemIndex()
+    focusMenuItem(focusedIndex === -1 ? -1 : focusedIndex - 1)
+    return
+  }
+
+  if (event.key === 'Home') {
+    event.preventDefault()
+    focusMenuItem(0)
+    return
+  }
+
+  if (event.key === 'End') {
+    event.preventDefault()
+    focusMenuItem(getMenuButtons().length - 1)
+  }
+}
+
+const getCustomMenuKey = (item: IContextMenu): string => item.key ?? `${item.title}-${item.icon ?? ''}`
+
 /** 挂载后修正菜单位置，避免超出右边界 */
 onMounted(() => {
   const menuWidth = menuElementRef.value?.clientWidth ?? 0
   if (menuPosition.left + menuWidth > window.innerWidth) {
     menuPosition.left = window.innerWidth - menuWidth - 5
   }
+  focusMenuItem(0)
 })
 </script>
 

package/src/lib/components/PageLoading.vue

@@ -8,34 +8,36 @@
   <div
     v-if="isLoading"
     class="stack-tab-loading-mask"
+    role="status"
+    aria-live="polite"
+    :aria-label="t('VueStackTab.loading')"
     :style="{ zIndex: getMaxZIndex('.cache-page-wrapper *') }"
   >
-    <div class="stack-tab-loading--spin turn" />
+    <div class="stack-tab-loading--spin turn" aria-hidden="true" />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n-lite'
 import { TabEventType, useTabEmitter } from '../hooks/useTabEventBus'
 import { getMaxZIndex } from '../utils/scrollUtils'
 const props = defineProps<{
   /** 当前标签 id，用于过滤 PAGE_LOADING 事件 */
   tabId: string
 }>()
+const { t } = useI18n()
 const emitter = useTabEmitter()
 /** 是否显示 loading 遮罩 */
 const isLoading = ref<boolean>(false)
-/** PAGE_LOADING 事件 payload */
-type PageLoadingPayload = { tId: string; value: boolean }
 /** 处理 PAGE_LOADING 事件，仅当 tId 匹配时更新 */
-const handleLoadingEvent = (payload: PageLoadingPayload) => {
+const handleLoadingEvent = (payload: { tId: string; value: boolean }) => {
   if (payload.tId === props.tabId) {
     isLoading.value = payload.value
   }
 }
-const eventType = TabEventType.PAGE_LOADING as unknown as Parameters<typeof emitter.on>[0]
-emitter.on(eventType, handleLoadingEvent as (e: unknown) => void)
+emitter.on(TabEventType.PAGE_LOADING, handleLoadingEvent)
 onUnmounted(() => {
-  emitter.off(eventType, handleLoadingEvent as (e: unknown) => void)
+  emitter.off(TabEventType.PAGE_LOADING, handleLoadingEvent)
 })
 </script>
 <style scoped></style>

package/src/lib/components/StackKeepAlive/StackCacheRenderer.vue

@@ -0,0 +1,70 @@
+<!--
+  StackCacheRenderer - 内部缓存组件解析层
+
+  职责：
+  - 接收 router-view slot 提供的 route 与 Component
+  - 仅在 route/component 身份变化时调用 useTabPanel.addPage
+  - 通过 scoped slot 暴露包装组件，确保真正的缓存页仍是 keep-alive 的直接子节点
+
+  注意：
+  - 这是内部组件，暂不从 src/lib/index.ts 导出
+  - 不负责 transition、keep-alive、TabHeader、iframe 或 session 初始化
+-->
+<script lang="ts" setup>
+import { defineComponent, shallowRef, watch } from 'vue'
+import type { DefineComponent, VNode } from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import useTabPanel from '../../hooks/useTabPanel'
+
+interface StackCacheRendererProps {
+  route: RouteLocationNormalizedLoaded
+  component?: VNode | null
+}
+
+interface StackCacheRendererSlotProps {
+  wrappedComponent: DefineComponent
+  activeCacheKey: string
+  refreshKey: number
+  activePageRefreshVersion: number
+  component?: VNode | null
+}
+
+const props = defineProps<StackCacheRendererProps>()
+
+defineSlots<{
+  default(props: StackCacheRendererSlotProps): unknown
+}>()
+
+const { refreshKey, activeCacheKey, activePageRefreshVersion, addPage } = useTabPanel()
+
+const EmptyRendererComponent = defineComponent({
+  name: 'StackCacheRendererEmpty',
+  setup() {
+    return () => null
+  }
+}) as DefineComponent
+
+const wrappedComponent = shallowRef<DefineComponent>(EmptyRendererComponent)
+
+const getComponentIdentity = (component?: VNode | null): unknown => {
+  return component?.type ?? component
+}
+
+watch(
+  [() => props.route.fullPath, () => getComponentIdentity(props.component), () => refreshKey.value],
+  () => {
+    wrappedComponent.value = addPage(props.route, props.component)
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <slot
+    :wrapped-component="wrappedComponent"
+    :active-cache-key="activeCacheKey"
+    :refresh-key="refreshKey"
+    :active-page-refresh-version="activePageRefreshVersion"
+    :component="component"
+  />
+</template>

package/src/lib/components/StackKeepAlive/StackKeepAlive.vue

@@ -0,0 +1,57 @@
+<!--
+  StackKeepAlive - 内部页面缓存渲染层
+
+  职责：
+  - 渲染 router-view 当前页面
+  - 维持 transition -> keep-alive -> dynamic component 的原有结构
+  - 通过 StackCacheRenderer 注册并解析栈式缓存页
+  - 将缓存页 on-loaded 事件转发为 loaded
+
+  注意：
+  - 这是内部组件，暂不从 src/lib/index.ts 导出
+  - 不负责 TabHeader、iframe、session 初始化或 openTab/closeTab API
+-->
+<script lang="ts" setup>
+import useTabPanel from '../../hooks/useTabPanel'
+import StackCacheRenderer from './StackCacheRenderer.vue'
+
+interface StackKeepAliveProps {
+  transitionName?: string
+}
+
+withDefaults(defineProps<StackKeepAliveProps>(), {
+  transitionName: 'stack-tab-swap'
+})
+
+const emit = defineEmits<{
+  loaded: []
+}>()
+
+const { caches } = useTabPanel()
+
+/** 页面组件加载完成时向父组件转发 */
+const emitLoaded = () => {
+  emit('loaded')
+}
+</script>
+
+<template>
+  <router-view v-slot="{ Component, route }">
+    <StackCacheRenderer
+      v-slot="{ wrappedComponent, activeCacheKey, activePageRefreshVersion, component }"
+      :route="route"
+      :component="Component"
+    >
+      <transition :name="transitionName" appear mode="out-in">
+        <keep-alive :include="caches">
+          <component
+            :is="wrappedComponent"
+            :key="`${activeCacheKey}-${activePageRefreshVersion}`"
+            :vnode="component"
+            @on-loaded="emitLoaded"
+          />
+        </keep-alive>
+      </transition>
+    </StackCacheRenderer>
+  </router-view>
+</template>

package/src/lib/components/TabHeader/TabHeaderButton.vue

@@ -4,24 +4,28 @@
   职责：左右滚动箭头、全屏/还原按钮，支持禁用与阴影样式
 -->
 <template>
-  <div
+  <button
+    type="button"
     class="stack-tab__header-button"
     :class="{
       'stack-tab__shadow-right': shadow === 'right',
       'stack-tab__shadow-left': shadow === 'left'
     }"
-    :disabled="disabled ? 'disabled' : null"
+    :disabled="disabled"
     :title="title"
+    :aria-label="resolvedAriaLabel"
   >
-    <div v-if="!('icon' in $slots)" class="stack-tab__mask-button" :class="iconClass" />
-    <div v-if="'icon' in $slots" class="stack-tab__button">
+    <span v-if="!('icon' in $slots)" class="stack-tab__mask-button" :class="iconClass" />
+    <span v-if="'icon' in $slots" class="stack-tab__button">
       <slot name="icon" />
-    </div>
-  </div>
+    </span>
+  </button>
 </template>
 
 <script lang="ts" setup>
-withDefaults(
+import { computed } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     /** 是否禁用 */
     disabled?: boolean
@@ -31,14 +35,21 @@ withDefaults(
     iconClass?: string
     /** 悬停提示 */
     title?: string
+    /** 辅助技术标签，未传时使用 title */
+    ariaLabel?: string
   }>(),
   {
     disabled: false,
     shadow: null,
     iconClass: '',
-    title: ''
+    title: '',
+    ariaLabel: ''
   }
 )
+
+const resolvedAriaLabel = computed<string>(() => {
+  return props.ariaLabel || props.title
+})
 </script>
 
 <style scoped></style>