mirror of
https://github.com/vbenjs/gf-vben-admin.git
synced 2025-02-02 19:08:40 +08:00
feat(tree): add headerTitle slot
This commit is contained in:
parent
782cbc0a0b
commit
6bb19fb2d4
@ -1,5 +1,9 @@
|
|||||||
## Wip
|
## Wip
|
||||||
|
|
||||||
|
### ✨ Features
|
||||||
|
|
||||||
|
- 新增`headerTitle` slot
|
||||||
|
|
||||||
### ✨ Refactor
|
### ✨ Refactor
|
||||||
|
|
||||||
- 移除 useFullScreen 函数
|
- 移除 useFullScreen 函数
|
||||||
|
@ -25,7 +25,6 @@ export const basicProps = {
|
|||||||
schemas: {
|
schemas: {
|
||||||
type: [Array] as PropType<FormSchema[]>,
|
type: [Array] as PropType<FormSchema[]>,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
required: true,
|
|
||||||
},
|
},
|
||||||
mergeDynamicData: {
|
mergeDynamicData: {
|
||||||
type: Object as PropType<Recordable>,
|
type: Object as PropType<Recordable>,
|
||||||
|
@ -38,7 +38,7 @@
|
|||||||
|
|
||||||
import { getCurrentParentPath } from '/@/router/menus';
|
import { getCurrentParentPath } from '/@/router/menus';
|
||||||
|
|
||||||
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
|
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
|
||||||
import { getAllParentPath } from '/@/router/helper/menuHelper';
|
import { getAllParentPath } from '/@/router/helper/menuHelper';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -105,7 +105,7 @@
|
|||||||
return inlineCollapseOptions;
|
return inlineCollapseOptions;
|
||||||
});
|
});
|
||||||
|
|
||||||
listenerLastChangeTab((route) => {
|
listenerRouteChange((route) => {
|
||||||
if (route.name === REDIRECT_NAME) return;
|
if (route.name === REDIRECT_NAME) return;
|
||||||
handleMenuChange(route);
|
handleMenuChange(route);
|
||||||
currentActiveMenu.value = route.meta?.currentActiveMenu as string;
|
currentActiveMenu.value = route.meta?.currentActiveMenu as string;
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
|
|
||||||
import Menu from './components/Menu.vue';
|
import Menu from './components/Menu.vue';
|
||||||
import SimpleSubMenu from './SimpleSubMenu.vue';
|
import SimpleSubMenu from './SimpleSubMenu.vue';
|
||||||
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
|
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
|
||||||
import { propTypes } from '/@/utils/propTypes';
|
import { propTypes } from '/@/utils/propTypes';
|
||||||
import { REDIRECT_NAME } from '/@/router/constant';
|
import { REDIRECT_NAME } from '/@/router/constant';
|
||||||
import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
|
import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
|
||||||
@ -91,7 +91,7 @@
|
|||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
listenerLastChangeTab((route) => {
|
listenerRouteChange((route) => {
|
||||||
if (route.name === REDIRECT_NAME) return;
|
if (route.name === REDIRECT_NAME) return;
|
||||||
|
|
||||||
currentActiveMenu.value = route.meta?.currentActiveMenu as string;
|
currentActiveMenu.value = route.meta?.currentActiveMenu as string;
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex px-2 py-1.5 items-center border-b-1">
|
<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="flex flex-1 justify-end items-center cursor-pointer" v-if="search || toolbar">
|
||||||
<div class="mr-1 w-2/3" v-if="search">
|
<div class="mr-1 w-2/3" v-if="search">
|
||||||
|
@ -321,7 +321,7 @@
|
|||||||
}
|
}
|
||||||
return () => {
|
return () => {
|
||||||
const { title, helpMessage, toolbar, search, checkable } = props;
|
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)' };
|
const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
|
||||||
return (
|
return (
|
||||||
<div class={[prefixCls, 'h-full bg-white', attrs.class]}>
|
<div class={[prefixCls, 'h-full bg-white', attrs.class]}>
|
||||||
@ -336,7 +336,9 @@
|
|||||||
helpMessage={helpMessage}
|
helpMessage={helpMessage}
|
||||||
onStrictlyChange={onStrictlyChange}
|
onStrictlyChange={onStrictlyChange}
|
||||||
onSearch={handleSearch}
|
onSearch={handleSearch}
|
||||||
/>
|
>
|
||||||
|
{extendSlots(slots)}
|
||||||
|
</TreeHeader>
|
||||||
)}
|
)}
|
||||||
<ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
|
<ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
|
||||||
<Tree {...unref(getBindValues)} showIcon={false}>
|
<Tree {...unref(getBindValues)} showIcon={false}>
|
||||||
|
@ -3,7 +3,7 @@ import { useTitle as usePageTitle } from '@vueuse/core';
|
|||||||
import { useGlobSetting } from '/@/hooks/setting';
|
import { useGlobSetting } from '/@/hooks/setting';
|
||||||
|
|
||||||
import { REDIRECT_NAME } from '/@/router/constant';
|
import { REDIRECT_NAME } from '/@/router/constant';
|
||||||
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
|
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
|
||||||
|
|
||||||
export function useTitle() {
|
export function useTitle() {
|
||||||
const { title } = useGlobSetting();
|
const { title } = useGlobSetting();
|
||||||
@ -11,7 +11,7 @@ export function useTitle() {
|
|||||||
|
|
||||||
const pageTitle = usePageTitle();
|
const pageTitle = usePageTitle();
|
||||||
|
|
||||||
listenerLastChangeTab((route) => {
|
listenerRouteChange((route) => {
|
||||||
if (route.name === REDIRECT_NAME) {
|
if (route.name === REDIRECT_NAME) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -101,7 +101,7 @@
|
|||||||
|
|
||||||
import clickOutside from '/@/directives/clickOutside';
|
import clickOutside from '/@/directives/clickOutside';
|
||||||
import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
|
import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
|
||||||
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
|
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
|
||||||
import { SimpleMenu } from '/@/components/SimpleMenu';
|
import { SimpleMenu } from '/@/components/SimpleMenu';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -202,7 +202,7 @@
|
|||||||
menuModules.value = await getShallowMenus();
|
menuModules.value = await getShallowMenus();
|
||||||
});
|
});
|
||||||
|
|
||||||
listenerLastChangeTab((route) => {
|
listenerRouteChange((route) => {
|
||||||
currentRoute.value = route;
|
currentRoute.value = route;
|
||||||
setActive(true);
|
setActive(true);
|
||||||
if (unref(getCloseMixSidebarOnChange)) {
|
if (unref(getCloseMixSidebarOnChange)) {
|
||||||
|
@ -46,7 +46,7 @@
|
|||||||
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
|
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
|
||||||
|
|
||||||
import { REDIRECT_NAME } from '/@/router/constant';
|
import { REDIRECT_NAME } from '/@/router/constant';
|
||||||
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
|
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
|
||||||
|
|
||||||
import router from '/@/router';
|
import router from '/@/router';
|
||||||
|
|
||||||
@ -84,7 +84,7 @@
|
|||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
listenerLastChangeTab((route) => {
|
listenerRouteChange((route) => {
|
||||||
const { name } = route;
|
const { name } = route;
|
||||||
if (name === REDIRECT_NAME || !route || !userStore.getTokenState) return;
|
if (name === REDIRECT_NAME || !route || !userStore.getTokenState) return;
|
||||||
|
|
||||||
|
@ -12,13 +12,13 @@ const key = Symbol();
|
|||||||
|
|
||||||
let lastChangeTab: RouteLocationNormalized;
|
let lastChangeTab: RouteLocationNormalized;
|
||||||
|
|
||||||
export function setLastChangeTab(lastChangeRoute: RouteLocationNormalized) {
|
export function setRouteChange(lastChangeRoute: RouteLocationNormalized) {
|
||||||
const r = getRawRoute(lastChangeRoute);
|
const r = getRawRoute(lastChangeRoute);
|
||||||
mitt.emit(key, r);
|
mitt.emit(key, r);
|
||||||
lastChangeTab = r;
|
lastChangeTab = r;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function listenerLastChangeTab(
|
export function listenerRouteChange(
|
||||||
callback: (route: RouteLocationNormalized) => void,
|
callback: (route: RouteLocationNormalized) => void,
|
||||||
immediate = true
|
immediate = true
|
||||||
) {
|
) {
|
@ -14,7 +14,7 @@ export function createHttpGuard(router: Router) {
|
|||||||
}
|
}
|
||||||
router.beforeEach(async () => {
|
router.beforeEach(async () => {
|
||||||
// Switching the route will delete the previous request
|
// Switching the route will delete the previous request
|
||||||
removeAllHttpPending && axiosCanceler?.removeAllPending();
|
axiosCanceler?.removeAllPending();
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import type { Router } from 'vue-router';
|
import type { Router } from 'vue-router';
|
||||||
import { setLastChangeTab } from '/@/logics/mitt/tabChange';
|
import { setRouteChange } from '/@/logics/mitt/routeChange';
|
||||||
|
|
||||||
export function createPageGuard(router: Router) {
|
export function createPageGuard(router: Router) {
|
||||||
const loadedPageMap = new Map<string, boolean>();
|
const loadedPageMap = new Map<string, boolean>();
|
||||||
@ -7,7 +7,7 @@ export function createPageGuard(router: Router) {
|
|||||||
router.beforeEach(async (to) => {
|
router.beforeEach(async (to) => {
|
||||||
to.meta.loaded = !!loadedPageMap.get(to.path);
|
to.meta.loaded = !!loadedPageMap.get(to.path);
|
||||||
// Notify routing changes
|
// Notify routing changes
|
||||||
setLastChangeTab(to);
|
setRouteChange(to);
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
@ -25,7 +25,7 @@ export function createPageLoadingGuard(router: Router) {
|
|||||||
if (unref(getOpenPageLoading)) {
|
if (unref(getOpenPageLoading)) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
appStore.commitPageLoadingState(false);
|
appStore.commitPageLoadingState(false);
|
||||||
}, 300);
|
}, 220);
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
@ -4,7 +4,7 @@ import { tabStore } from '/@/store/modules/tab';
|
|||||||
import { userStore } from '/@/store/modules/user';
|
import { userStore } from '/@/store/modules/user';
|
||||||
import { permissionStore } from '/@/store/modules/permission';
|
import { permissionStore } from '/@/store/modules/permission';
|
||||||
import { PageEnum } from '/@/enums/pageEnum';
|
import { PageEnum } from '/@/enums/pageEnum';
|
||||||
import { removeTabChangeListener } from '/@/logics/mitt/tabChange';
|
import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
|
||||||
|
|
||||||
export function createStateGuard(router: Router) {
|
export function createStateGuard(router: Router) {
|
||||||
router.afterEach((to) => {
|
router.afterEach((to) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user