fix: #2744tabs选项卡渲染问题，以及完善路由中affix=true时处理逻辑。 (#3127)

* fix: #2744tabs选项卡渲染问题，以及完善路由中affix=true时处理逻辑。

* fix: type warning

---------

Co-authored-by: Li Kui <90845831+likui628@users.noreply.github.com>

src/layouts/default/header/MultipleHeader.vue

@@ -2,7 +2,7 @@
   <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
   <div :style="getWrapStyle" :class="getClass">
     <LayoutHeader v-if="getShowInsetHeaderRef" />
-    <MultipleTabs v-if="getShowTabs" />
+    <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
   </div>
 </template>
 <script lang="ts">
@@ -18,6 +18,7 @@
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLayoutHeight } from '../content/useContentViewHeight';
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
 
   const HEADER_HEIGHT = 48;
 
@@ -27,6 +28,7 @@
     components: { LayoutHeader, MultipleTabs },
     setup() {
       const { setHeaderHeight } = useLayoutHeight();
+      const tabStore = useMultipleTabStore();
       const { prefixCls } = useDesign('layout-multiple-header');
 
       const { getCalcContentWidth, getSplit } = useMenuSetting();
@@ -101,6 +103,7 @@
         getIsShowPlaceholderDom,
         getShowTabs,
         getShowInsetHeaderRef,
+        tabStore,
       };
     },
   });

src/layouts/default/tabs/index.vue

@@ -8,7 +8,7 @@
       :tabBarGutter="3"
       :activeKey="activeKeyRef"
       @change="handleChange"
-      @edit="handleEdit"
+      @edit="(e) => handleEdit(`${e}`)"
     >
       <template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
         <TabPane :closable="!(item && item.meta && item.meta.affix)">

src/layouts/default/tabs/useMultipleTabs.ts

@@ -6,6 +6,9 @@ import { useMultipleTabStore } from '/@/store/modules/multipleTab';
 import { isNullAndUnDef } from '/@/utils/is';
 import projectSetting from '/@/settings/projectSetting';
 import { useRouter } from 'vue-router';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
 
 export function initAffixTabs(): string[] {
   const affixList = ref<RouteLocationNormalized[]>([]);
@@ -60,10 +63,10 @@ export function useTabsDrag(affixTextList: string[]) {
       `.${prefixCls} .ant-tabs-nav-wrap > div`,
     )?.[0] as HTMLElement;
     const { initSortable } = useSortable(el, {
-      filter: (e: ChangeEvent) => {
-        const text = e?.target?.innerText;
+      filter: (_evt, target: HTMLElement) => {
+        const text = target.innerText;
         if (!text) return false;
-        return affixTextList.includes(text);
+        return affixTextList.map((res) => t(res)).includes(text);
       },
       onEnd: (evt) => {
         const { oldIndex, newIndex } = evt;