From 6bb19fb2d4fa57d8006281d52acd80baaa054b3e Mon Sep 17 00:00:00 2001
From: Vben <anncwb@126.com>
Date: Sat, 27 Mar 2021 17:25:37 +0800
Subject: [PATCH] feat(tree): add headerTitle slot

---
 CHANGELOG.zh_CN.md                               | 4 ++++
 src/components/Form/src/props.ts                 | 1 -
 src/components/Menu/src/BasicMenu.vue            | 4 ++--
 src/components/SimpleMenu/src/SimpleMenu.vue     | 4 ++--
 src/components/Tree/src/TreeHeader.vue           | 5 ++++-
 src/components/Tree/src/index.vue                | 6 ++++--
 src/hooks/web/useTitle.ts                        | 4 ++--
 src/layouts/default/sider/MixSider.vue           | 4 ++--
 src/layouts/default/tabs/index.vue               | 4 ++--
 src/logics/mitt/{tabChange.ts => routeChange.ts} | 4 ++--
 src/router/guard/httpGuard.ts                    | 2 +-
 src/router/guard/pageGuard.ts                    | 4 ++--
 src/router/guard/pageLoadingGuard.ts             | 2 +-
 src/router/guard/stateGuard.ts                   | 2 +-
 14 files changed, 29 insertions(+), 21 deletions(-)
 rename src/logics/mitt/{tabChange.ts => routeChange.ts} (86%)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index f879b4c9..6ddcde32 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,5 +1,9 @@
 ## Wip
 
+### ✨ Features
+
+- 新增`headerTitle` slot
+
 ### ✨ Refactor
 
 - 移除 useFullScreen 函数
diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts
index 8a01c89f..a397bb9a 100644
--- a/src/components/Form/src/props.ts
+++ b/src/components/Form/src/props.ts
@@ -25,7 +25,6 @@ export const basicProps = {
   schemas: {
     type: [Array] as PropType<FormSchema[]>,
     default: () => [],
-    required: true,
   },
   mergeDynamicData: {
     type: Object as PropType<Recordable>,
diff --git a/src/components/Menu/src/BasicMenu.vue b/src/components/Menu/src/BasicMenu.vue
index fcd43db4..12140ba0 100644
--- a/src/components/Menu/src/BasicMenu.vue
+++ b/src/components/Menu/src/BasicMenu.vue
@@ -38,7 +38,7 @@
 
   import { getCurrentParentPath } from '/@/router/menus';
 
-  import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
   import { getAllParentPath } from '/@/router/helper/menuHelper';
 
   export default defineComponent({
@@ -105,7 +105,7 @@
         return inlineCollapseOptions;
       });
 
-      listenerLastChangeTab((route) => {
+      listenerRouteChange((route) => {
         if (route.name === REDIRECT_NAME) return;
         handleMenuChange(route);
         currentActiveMenu.value = route.meta?.currentActiveMenu as string;
diff --git a/src/components/SimpleMenu/src/SimpleMenu.vue b/src/components/SimpleMenu/src/SimpleMenu.vue
index b341adb6..4068f0fb 100644
--- a/src/components/SimpleMenu/src/SimpleMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleMenu.vue
@@ -27,7 +27,7 @@
 
   import Menu from './components/Menu.vue';
   import SimpleSubMenu from './SimpleSubMenu.vue';
-  import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
   import { propTypes } from '/@/utils/propTypes';
   import { REDIRECT_NAME } from '/@/router/constant';
   import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
@@ -91,7 +91,7 @@
         { immediate: true }
       );
 
-      listenerLastChangeTab((route) => {
+      listenerRouteChange((route) => {
         if (route.name === REDIRECT_NAME) return;
 
         currentActiveMenu.value = route.meta?.currentActiveMenu as string;
diff --git a/src/components/Tree/src/TreeHeader.vue b/src/components/Tree/src/TreeHeader.vue
index e16f1dee..b1efb268 100644
--- a/src/components/Tree/src/TreeHeader.vue
+++ b/src/components/Tree/src/TreeHeader.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="flex px-2 py-1.5 items-center border-b-1">
-    <BasicTitle :helpMessage="helpMessage" v-if="title">{{ title }}</BasicTitle>
+    <slot name="headerTitle" v-if="$slots.headerTitle"></slot>
+    <BasicTitle :helpMessage="helpMessage" v-if="!$slots.headerTitle && title">{{
+      title
+    }}</BasicTitle>
 
     <div class="flex flex-1 justify-end items-center cursor-pointer" v-if="search || toolbar">
       <div class="mr-1 w-2/3" v-if="search">
diff --git a/src/components/Tree/src/index.vue b/src/components/Tree/src/index.vue
index deedd2c0..b1e54c08 100644
--- a/src/components/Tree/src/index.vue
+++ b/src/components/Tree/src/index.vue
@@ -321,7 +321,7 @@
       }
       return () => {
         const { title, helpMessage, toolbar, search, checkable } = props;
-        const showTitle = title || toolbar || search;
+        const showTitle = title || toolbar || search || slots.headerTitle;
         const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
         return (
           <div class={[prefixCls, 'h-full bg-white', attrs.class]}>
@@ -336,7 +336,9 @@
                 helpMessage={helpMessage}
                 onStrictlyChange={onStrictlyChange}
                 onSearch={handleSearch}
-              />
+              >
+                {extendSlots(slots)}
+              </TreeHeader>
             )}
             <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
               <Tree {...unref(getBindValues)} showIcon={false}>
diff --git a/src/hooks/web/useTitle.ts b/src/hooks/web/useTitle.ts
index 6943d7c2..b4a20455 100644
--- a/src/hooks/web/useTitle.ts
+++ b/src/hooks/web/useTitle.ts
@@ -3,7 +3,7 @@ import { useTitle as usePageTitle } from '@vueuse/core';
 import { useGlobSetting } from '/@/hooks/setting';
 
 import { REDIRECT_NAME } from '/@/router/constant';
-import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+import { listenerRouteChange } from '/@/logics/mitt/routeChange';
 
 export function useTitle() {
   const { title } = useGlobSetting();
@@ -11,7 +11,7 @@ export function useTitle() {
 
   const pageTitle = usePageTitle();
 
-  listenerLastChangeTab((route) => {
+  listenerRouteChange((route) => {
     if (route.name === REDIRECT_NAME) {
       return;
     }
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index 352abeaf..1eb99df2 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -101,7 +101,7 @@
 
   import clickOutside from '/@/directives/clickOutside';
   import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
-  import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
   import { SimpleMenu } from '/@/components/SimpleMenu';
 
   export default defineComponent({
@@ -202,7 +202,7 @@
         menuModules.value = await getShallowMenus();
       });
 
-      listenerLastChangeTab((route) => {
+      listenerRouteChange((route) => {
         currentRoute.value = route;
         setActive(true);
         if (unref(getCloseMixSidebarOnChange)) {
diff --git a/src/layouts/default/tabs/index.vue b/src/layouts/default/tabs/index.vue
index bc0952b9..9800420f 100644
--- a/src/layouts/default/tabs/index.vue
+++ b/src/layouts/default/tabs/index.vue
@@ -46,7 +46,7 @@
   import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 
   import { REDIRECT_NAME } from '/@/router/constant';
-  import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
 
   import router from '/@/router';
 
@@ -84,7 +84,7 @@
         ];
       });
 
-      listenerLastChangeTab((route) => {
+      listenerRouteChange((route) => {
         const { name } = route;
         if (name === REDIRECT_NAME || !route || !userStore.getTokenState) return;
 
diff --git a/src/logics/mitt/tabChange.ts b/src/logics/mitt/routeChange.ts
similarity index 86%
rename from src/logics/mitt/tabChange.ts
rename to src/logics/mitt/routeChange.ts
index 90c0522b..9b7d9e04 100644
--- a/src/logics/mitt/tabChange.ts
+++ b/src/logics/mitt/routeChange.ts
@@ -12,13 +12,13 @@ const key = Symbol();
 
 let lastChangeTab: RouteLocationNormalized;
 
-export function setLastChangeTab(lastChangeRoute: RouteLocationNormalized) {
+export function setRouteChange(lastChangeRoute: RouteLocationNormalized) {
   const r = getRawRoute(lastChangeRoute);
   mitt.emit(key, r);
   lastChangeTab = r;
 }
 
-export function listenerLastChangeTab(
+export function listenerRouteChange(
   callback: (route: RouteLocationNormalized) => void,
   immediate = true
 ) {
diff --git a/src/router/guard/httpGuard.ts b/src/router/guard/httpGuard.ts
index 1d3b3b1b..123ae9b1 100644
--- a/src/router/guard/httpGuard.ts
+++ b/src/router/guard/httpGuard.ts
@@ -14,7 +14,7 @@ export function createHttpGuard(router: Router) {
   }
   router.beforeEach(async () => {
     // Switching the route will delete the previous request
-    removeAllHttpPending && axiosCanceler?.removeAllPending();
+    axiosCanceler?.removeAllPending();
     return true;
   });
 }
diff --git a/src/router/guard/pageGuard.ts b/src/router/guard/pageGuard.ts
index 19027aef..c3dc0e81 100644
--- a/src/router/guard/pageGuard.ts
+++ b/src/router/guard/pageGuard.ts
@@ -1,5 +1,5 @@
 import type { Router } from 'vue-router';
-import { setLastChangeTab } from '/@/logics/mitt/tabChange';
+import { setRouteChange } from '/@/logics/mitt/routeChange';
 
 export function createPageGuard(router: Router) {
   const loadedPageMap = new Map<string, boolean>();
@@ -7,7 +7,7 @@ export function createPageGuard(router: Router) {
   router.beforeEach(async (to) => {
     to.meta.loaded = !!loadedPageMap.get(to.path);
     // Notify routing changes
-    setLastChangeTab(to);
+    setRouteChange(to);
 
     return true;
   });
diff --git a/src/router/guard/pageLoadingGuard.ts b/src/router/guard/pageLoadingGuard.ts
index 9c3dadf8..0a662657 100644
--- a/src/router/guard/pageLoadingGuard.ts
+++ b/src/router/guard/pageLoadingGuard.ts
@@ -25,7 +25,7 @@ export function createPageLoadingGuard(router: Router) {
     if (unref(getOpenPageLoading)) {
       setTimeout(() => {
         appStore.commitPageLoadingState(false);
-      }, 300);
+      }, 220);
     }
     return true;
   });
diff --git a/src/router/guard/stateGuard.ts b/src/router/guard/stateGuard.ts
index 4884651d..c004764c 100644
--- a/src/router/guard/stateGuard.ts
+++ b/src/router/guard/stateGuard.ts
@@ -4,7 +4,7 @@ import { tabStore } from '/@/store/modules/tab';
 import { userStore } from '/@/store/modules/user';
 import { permissionStore } from '/@/store/modules/permission';
 import { PageEnum } from '/@/enums/pageEnum';
-import { removeTabChangeListener } from '/@/logics/mitt/tabChange';
+import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
 
 export function createStateGuard(router: Router) {
   router.afterEach((to) => {