fix: fix routing switch, tab is not activated

nebv
1 parent 177010bf
Showing 8 changed files with 42 additions and 26 deletions
src/components/Menu/src/BasicMenu.tsx
src/hooks/web/usePage.ts
src/hooks/web/useTabs.ts
src/layouts/Logo.vue
src/layouts/default/LayoutMenu.tsx
src/layouts/default/index.less
src/layouts/default/multitabs/index.tsx
src/settings/projectSetting.ts
@@ -239,14 +239,13 @@ export default defineComponent({
       ) : (
         <section class={`basic-menu-wrap`}>
           {getSlot(slots, 'header')}
-          {props.search && (
-            <SearchInput
-              theme={props.theme}
-              onChange={handleInputChange}
-              onClick={handleInputClick}
-              collapsed={getCollapsedState}
-            />
-          )}
+          <SearchInput
+            class={!props.search ? 'hidden' : ''}
+            theme={props.theme}
+            onChange={handleInputChange}
+            onClick={handleInputClick}
+            collapsed={getCollapsedState}
+          />
           <section style={unref(getMenuWrapStyle)}>
             <ScrollContainer>{() => renderMenu()}</ScrollContainer>
           </section>
@@ -10,6 +10,7 @@ export type RouteLocationRawEx = Omit&lt;RouteLocationRaw, &#39;path&#39;&gt; &amp; { path: PageEn
 function handleError(e: Error) {
   console.error(e);
+  // 101是为了 大于 打开时候设置的100延时防止闪动
   setTimeout(() => {
     appStore.commitPageLoadingState(false);
   }, 101);
@@ -3,6 +3,9 @@ import { PageEnum } from &#39;/@/enums/pageEnum&#39;;
 import { TabItem, tabStore } from '/@/store/modules/tab';
 import { appStore } from '/@/store/modules/app';
 import router from '/@/router';
+import { ref } from 'vue';
+
+const activeKeyRef = ref<string>('');
 type Fn = () => void;
 type RouteFn = (tabItem: TabItem) => void;
@@ -70,12 +73,13 @@ export function useTabs() {
     closeOther: () => canIUseFn() && closeOther(tabStore.getCurrentTab),
     closeCurrent: () => canIUseFn() && closeCurrent(tabStore.getCurrentTab),
     resetCache: () => canIUseFn() && resetCache(),
-    addTab: (path: PageEnum, goTo = false) => {
+    addTab: (path: PageEnum, goTo = false, replace = false) => {
       useTimeout(() => {
         tabStore.addTabByPathAction(path);
       }, 0);
-
-      goTo && router.push(path);
+      activeKeyRef.value = path;
+      goTo && replace ? router.replace : router.push(path);
     },
+    activeKeyRef,
   };
 }
 <template>
   <div class="app-logo" @click="handleGoHome">
     <img :src="logo" />
-    <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
+    <div v-if="show" class="logo-title ml-1 ellipsis">{{ globSetting.title }}</div>
   </div>
 </template>
 <script lang="ts">
@@ -62,7 +62,7 @@
     .logo-title {
       display: none;
       font-family: Georgia, serif;
-      font-size: 18px;
+      font-size: 16px;
       .respond-to(medium,{
        display: block;
      });
@@ -193,7 +193,7 @@ export default defineComponent({
           class="layout-menu"
           theme={themeData}
           showLogo={isShowLogo}
-          search={unref(showSearchRef)}
+          search={unref(showSearchRef) && !collapsed}
           items={unref(menusRef)}
           flatItems={unref(flatMenusRef)}
           onClickSearchInput={handleClickSearchInput}
@@ -48,7 +48,7 @@
   .layout-menu {
     &__logo {
       height: @header-height;
-      padding: 10px;
+      padding: 10px 4px;
       img {
         width: @logo-width;
@@ -2,7 +2,14 @@ import type { TabContentProps } from &#39;./tab.data&#39;;
 import type { TabItem } from '/@/store/modules/tab';
 import type { AppRouteRecordRaw } from '/@/router/types';
-import { defineComponent, watch, computed, ref, unref, onMounted } from 'vue';
+import {
+  defineComponent,
+  watch,
+  computed,
+  // ref,
+  unref,
+  onMounted,
+} from 'vue';
 import { Tabs } from 'ant-design-vue';
 import TabContent from './TabContent';
@@ -12,41 +19,43 @@ import { TabContentEnum } from &#39;./tab.data&#39;;
 import { useRouter } from 'vue-router';
-import './index.less';
 import { tabStore } from '/@/store/modules/tab';
 import { closeTab } from './useTabDropdown';
 import router from '/@/router';
 import { useTabs } from '/@/hooks/web/useTabs';
 import { PageEnum } from '/@/enums/pageEnum';
+import './index.less';
 export default defineComponent({
   name: 'MultiTabs',
   setup() {
     let isAddAffix = false;
     const go = useGo();
     const { currentRoute } = useRouter();
-
+    const { addTab, activeKeyRef } = useTabs();
     onMounted(() => {
-      const { addTab } = useTabs();
       addTab(unref(currentRoute).path as PageEnum);
     });
     // 当前激活tab
-    const activeKeyRef = ref<string>('');
+    // const activeKeyRef = ref<string>('');
+
     // 当前tab列表
     const getTabsState = computed(() => {
       return tabStore.getTabsState;
     });
+    if (!isAddAffix) {
+      addAffixTabs();
+      isAddAffix = true;
+    }
+
     watch(
       () => unref(currentRoute).path,
       (path) => {
-        if (!isAddAffix) {
-          addAffixTabs();
-          isAddAffix = true;
+        if (activeKeyRef.value !== path) {
+          activeKeyRef.value = path;
         }
-        activeKeyRef.value = path;
-
         // 监听路由的话虽然可以，但是路由切换的时间会造成卡顿现象？
         // 使用useTab的addTab的话，当用户手动调转，需要自行调用addTab
         // tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
@@ -55,6 +64,7 @@ export default defineComponent({
         immediate: true,
       }
     );
+
     /**
      * @description: 过滤所有固定路由
      */
@@ -72,6 +82,7 @@ export default defineComponent({
         });
       return tabs;
     }
+
     /**
      * @description: 设置固定tabs
      */
@@ -87,6 +98,7 @@ export default defineComponent({
       activeKeyRef.value = activeKey;
       go(activeKey, false);
     }
+
     // 关闭当前ab
     function handleEdit(targetKey: string) {
       // 新增操作隐藏，目前只使用删除操作
@@ -51,7 +51,7 @@ const setting: ProjectConfig = {
     // 是否显示搜索框
     showSearch: true,
     // 菜单宽度
-    menuWidth: 200,
+    menuWidth: 180,
     // 菜单模式
     mode: MenuModeEnum.INLINE,
     // 菜单类型