fix: 修复tabs上右键的功能按钮逻辑

vbenjs · Oct 31, 2023 · 631dc4c · 631dc4c
1 parent 1bb7060
commit 631dc4c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 82 deletions.
diff --git a/packages/layouts/src/components/tabs/components/TabDropdown.vue b/packages/layouts/src/components/tabs/components/TabDropdown.vue
@@ -1,91 +1,35 @@
 <script lang="ts" setup>
-import {computed, h, nextTick, ref, unref} from 'vue'
-import { context } from '../../../../bridge'
+import { computed, nextTick, ref, unref } from 'vue'
 import { useI18n } from '@vben/locale'
 import { TabActionEnum } from '@vben/constants'
-import {RouteLocationNormalized, useRouter} from "vue-router"
-import {renderIcon} from "../../index";
-const { useTabs, useMultipleTabStore } = context
-const { refreshPage, close, closeAll, closeLeft, closeRight, closeOther } = useTabs()
-const { t } = useI18n();
+import { RouteLocationNormalized } from 'vue-router'
+import { renderIcon } from '@vben/vbencomponents'
+import { useTabs } from '@vben/hooks'
+import { useMultipleTab } from '@vben/stores'
+
+const { refreshPage, close, closeAll, closeLeft, closeRight, closeOther } =
+  useTabs()
+const { t } = useI18n()
 const x = ref(0)
 const y = ref(0)
 const targetTab = ref<RouteLocationNormalized>(null)
 const showDropdown = ref(false)
+const tabStore = useMultipleTab()
+const options = computed(
+  () =>
+    tabStore
+      .getTabActions(targetTab.value)
+      //筛选非当前路由tab的重新加载按钮
+      ?.filter((v) => !(v.key == 0 && v.disabled))
+      //渲染多语言和图标
+      .map((v) => {
+        v.label = t(v.label)
+        v.icon = renderIcon(v.icon)
+        return v
+      }),
+)
 
-const tabStore = useMultipleTabStore();
-const { currentRoute } = useRouter();
-
-const options = computed(() => {
-
-  if (!unref(targetTab)) {
-    return;
-  }
-  const { meta } = unref(targetTab);
-  const { path } = unref(currentRoute);
-
-  const isCurItem = unref(targetTab) ? unref(targetTab).path === path : false;
-
-  // Refresh button
-  const index = tabStore.getTabList.findIndex((tab) => tab.path === unref(targetTab).path)
-  const refreshDisabled = !isCurItem;
-  // Close left
-  const closeLeftDisabled = index === 0 || !isCurItem;
-
-  const disabled = tabStore.getTabList.length === 1;
-
-  // Close right
-  const closeRightDisabled =
-    !isCurItem || (index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0);
-  return [
-    {
-      label: t('layout.multipleTab.reload'),
-      key: TabActionEnum.REFRESH_PAGE,
-      icon: renderIcon('ion:reload-sharp'),
-      disabled: refreshDisabled,
-    },
-    {
-      label: t('layout.multipleTab.close'),
-      key: TabActionEnum.CLOSE_CURRENT,
-      icon: renderIcon('clarity:close-line'),
-      disabled: !!meta?.affix || disabled
-    },
-    {
-      type: 'divider',
-      key: 'divider1'
-    },
-    {
-      icon: renderIcon('line-md:arrow-close-left'),
-      key: TabActionEnum.CLOSE_LEFT,
-      label: t('layout.multipleTab.closeLeft'),
-      disabled: closeLeftDisabled,
-    },
-    {
-      icon: renderIcon('line-md:arrow-close-right'),
-      key: TabActionEnum.CLOSE_RIGHT,
-      label: t('layout.multipleTab.closeRight'),
-      disabled: closeRightDisabled,
-    },
-    {
-      type: 'divider',
-      key: 'divider2'
-    },
-    {
-      icon: renderIcon('dashicons:align-center'),
-      key: TabActionEnum.CLOSE_OTHER,
-      label: t('layout.multipleTab.closeOther'),
-      disabled: disabled || !isCurItem,
-    },
-    {
-      label: t('layout.multipleTab.closeAll'),
-      key: TabActionEnum.CLOSE_ALL,
-      icon: renderIcon('clarity:minus-line'),
-      disabled: disabled,
-    },
-  ]
-})
-
-const openDropdown = (e:PointerEvent, tabItem: RouteLocationNormalized) => {
+const openDropdown = (e: PointerEvent, tabItem: RouteLocationNormalized) => {
   targetTab.value = tabItem
   showDropdown.value = false
   nextTick().then(() => {
@@ -95,12 +39,13 @@ const openDropdown = (e:PointerEvent, tabItem: RouteLocationNormalized) => {
   })
 }
 const handleSelect = async (key) => {
+  let tab = unref(targetTab)
   switch (key) {
     case TabActionEnum.REFRESH_PAGE:
       await refreshPage()
       break
     case TabActionEnum.CLOSE_CURRENT:
-      await close(unref(targetTab))
+      await close(tab)
       break
     case TabActionEnum.CLOSE_ALL:
       await closeAll()

diff --git a/packages/stores/src/modules/multipleTab.ts b/packages/stores/src/modules/multipleTab.ts
@@ -399,14 +399,15 @@ export const useMultipleTab = defineStore({
       )
       const refreshDisabled = !isCurItem
       // Close left
-      const closeLeftDisabled = index === 0 || !isCurItem
+      const closeLeftDisabled = index === 0
 
       const disabled = this.getTabList.length === 1
 
       // Close right
       const closeRightDisabled =
         !isCurItem ||
         (index === this.getTabList.length - 1 && this.getLastDragEndIndex >= 0)
+
       return [
         {
           label: 'layout.multipleTab.reload',