feat(tree): add headerTitle slot

Vben
1 parent 782cbc0a
Showing 14 changed files with 29 additions and 21 deletions
CHANGELOG.zh_CN.md
src/components/Form/src/props.ts
src/components/Menu/src/BasicMenu.vue
src/components/SimpleMenu/src/SimpleMenu.vue
src/components/Tree/src/TreeHeader.vue
src/components/Tree/src/index.vue
src/hooks/web/useTitle.ts
src/layouts/default/sider/MixSider.vue
src/layouts/default/tabs/index.vue
src/logics/mitt/tabChange.ts → src/logics/mitt/routeChange.ts
src/router/guard/httpGuard.ts
src/router/guard/pageGuard.ts
src/router/guard/pageLoadingGuard.ts
src/router/guard/stateGuard.ts
 ## Wip
+### ✨ Features
+
+- 新增`headerTitle` slot
+
 ### ✨ Refactor
 - 移除 useFullScreen 函数
@@ -25,7 +25,6 @@ export const basicProps = {
   schemas: {
     type: [Array] as PropType<FormSchema[]>,
     default: () => [],
-    required: true,
   },
   mergeDynamicData: {
     type: Object as PropType<Recordable>,
@@ -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;
@@ -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;
 <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">
@@ -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}>
@@ -3,7 +3,7 @@ import { useTitle as usePageTitle } from &#39;@vueuse/core&#39;;
 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;
     }
@@ -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)) {
@@ -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;
@@ -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
 ) {
@@ -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;
   });
 }
 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;
   });
@@ -25,7 +25,7 @@ export function createPageLoadingGuard(router: Router) {
     if (unref(getOpenPageLoading)) {
       setTimeout(() => {
         appStore.commitPageLoadingState(false);
-      }, 300);
+      }, 220);
     }
     return true;
   });
@@ -4,7 +4,7 @@ import { tabStore } from &#39;/@/store/modules/tab&#39;;
 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) => {