From beb4c3a37f314b97657a1d85e7db2abf40dbe6c3 Mon Sep 17 00:00:00 2001
From: nebv <vbenadmin@163.com>
Date: Tue, 13 Oct 2020 01:39:56 +0800
Subject: [PATCH] fix: fix routing switch, tab is not activated

---
 src/components/Menu/src/BasicMenu.tsx   | 15 ++++++------
 src/hooks/web/usePage.ts                |  1 +
 src/hooks/web/useTabs.ts                | 10 +++++---
 src/layouts/Logo.vue                    |  4 ++--
 src/layouts/default/LayoutMenu.tsx      |  2 +-
 src/layouts/default/index.less          |  2 +-
 src/layouts/default/multitabs/index.tsx | 32 +++++++++++++++++--------
 src/settings/projectSetting.ts          |  2 +-
 8 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/components/Menu/src/BasicMenu.tsx b/src/components/Menu/src/BasicMenu.tsx
index 3593a7c5..dd4ef27b 100644
--- a/src/components/Menu/src/BasicMenu.tsx
+++ b/src/components/Menu/src/BasicMenu.tsx
@@ -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>
diff --git a/src/hooks/web/usePage.ts b/src/hooks/web/usePage.ts
index a56e0a55..277e7836 100644
--- a/src/hooks/web/usePage.ts
+++ b/src/hooks/web/usePage.ts
@@ -10,6 +10,7 @@ export type RouteLocationRawEx = Omit<RouteLocationRaw, 'path'> & { path: PageEn
 
 function handleError(e: Error) {
   console.error(e);
+  // 101是为了 大于 打开时候设置的100延时防止闪动
   setTimeout(() => {
     appStore.commitPageLoadingState(false);
   }, 101);
diff --git a/src/hooks/web/useTabs.ts b/src/hooks/web/useTabs.ts
index 646bbbda..e7eccfc3 100644
--- a/src/hooks/web/useTabs.ts
+++ b/src/hooks/web/useTabs.ts
@@ -3,6 +3,9 @@ import { PageEnum } from '/@/enums/pageEnum';
 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,
   };
 }
diff --git a/src/layouts/Logo.vue b/src/layouts/Logo.vue
index 38235686..ea2a6c68 100644
--- a/src/layouts/Logo.vue
+++ b/src/layouts/Logo.vue
@@ -1,7 +1,7 @@
 <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;
      });
diff --git a/src/layouts/default/LayoutMenu.tsx b/src/layouts/default/LayoutMenu.tsx
index 6e4c1df7..6bdf20bb 100644
--- a/src/layouts/default/LayoutMenu.tsx
+++ b/src/layouts/default/LayoutMenu.tsx
@@ -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}
diff --git a/src/layouts/default/index.less b/src/layouts/default/index.less
index 518b93fd..19e70e7a 100644
--- a/src/layouts/default/index.less
+++ b/src/layouts/default/index.less
@@ -48,7 +48,7 @@
   .layout-menu {
     &__logo {
       height: @header-height;
-      padding: 10px;
+      padding: 10px 4px;
 
       img {
         width: @logo-width;
diff --git a/src/layouts/default/multitabs/index.tsx b/src/layouts/default/multitabs/index.tsx
index 6f923bb3..967435d3 100644
--- a/src/layouts/default/multitabs/index.tsx
+++ b/src/layouts/default/multitabs/index.tsx
@@ -2,7 +2,14 @@ import type { TabContentProps } from './tab.data';
 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 './tab.data';
 
 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) {
       // 新增操作隐藏，目前只使用删除操作
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index e5b0cdda..3392ed7c 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -51,7 +51,7 @@ const setting: ProjectConfig = {
     // 是否显示搜索框
     showSearch: true,
     // 菜单宽度
-    menuWidth: 200,
+    menuWidth: 180,
     // 菜单模式
     mode: MenuModeEnum.INLINE,
     // 菜单类型
-- 
GitLab