bunny-admin-element-thin/src/layout/hooks/useNav.ts

import { storeToRefs } from 'pinia';
import { getConfig } from '@/config';
import { useRouter } from 'vue-router';
import { emitter } from '@/utils/mitt';
import Avatar from '@/assets/user.jpg';
import { getTopMenu } from '@/router/utils';
import { useFullscreen } from '@vueuse/core';
import type { routeMetaType } from '../types';
import { remainingPaths, router } from '@/router';
import { computed, type CSSProperties } from 'vue';
import { useAppStoreHook } from '@/store/modules/app';
import { useUserStoreHook } from '@/store/modules/user';
import { isAllEmpty, useGlobal } from '@pureadmin/utils';
import { useEpThemeStoreHook } from '@/store/modules/epTheme';
import { usePermissionStoreHook } from '@/store/modules/permission';
import ExitFullscreen from '@iconify-icons/ri/fullscreen-exit-fill';
import Fullscreen from '@iconify-icons/ri/fullscreen-fill';
import { $t } from '@/plugins/i18n';

const errorInfo = 'The current routing configuration is incorrect, please check the configuration';

export function useNav() {
	const pureApp = useAppStoreHook();
	const routers = useRouter().options.routes;
	const { isFullscreen, toggle } = useFullscreen();
	const { wholeMenus } = storeToRefs(usePermissionStoreHook());
	/** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
	const tooltipEffect = getConfig()?.TooltipEffect ?? 'light';

	const getDivStyle = computed((): CSSProperties => {
		return {
			width: '100%',
			display: 'flex',
			alignItems: 'center',
			justifyContent: 'space-between',
			overflow: 'hidden',
		};
	});

	/** 头像（如果头像为空则使用 src/assets/user.jpg ） */
	const userAvatar = computed(() => {
		return isAllEmpty(useUserStoreHook()?.avatar) ? Avatar : useUserStoreHook()?.avatar;
	});

	/** 昵称（如果昵称为空则显示用户名） */
	const username = computed(() => {
		return isAllEmpty(useUserStoreHook()?.nickname) ? useUserStoreHook()?.username : useUserStoreHook()?.nickname;
	});

	/** 设置国际化选中后的样式 */
	const getDropdownItemStyle = computed(() => {
		return (locale, t) => {
			return {
				background: locale === t ? useEpThemeStoreHook().epThemeColor : '',
				color: locale === t ? '#f4f4f5' : '#000',
			};
		};
	});

	const getDropdownItemClass = computed(() => {
		return (locale, t) => {
			return locale === t ? '' : 'dark:hover:!text-primary';
		};
	});

	const avatarsStyle = computed(() => {
		return username.value ? { marginRight: '10px' } : '';
	});

	const isCollapse = computed(() => {
		return !pureApp.getSidebarStatus;
	});

	const device = computed(() => {
		return pureApp.getDevice;
	});

	const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
	const layout = computed(() => {
		return $storage?.layout?.layout;
	});

	const title = computed(() => {
		return $config.Title;
	});

	const copyright = computed(() => $config.Copyright);

	/** 动态title */
	function changeTitle(meta: routeMetaType) {
		const Title = getConfig().Title;
		if (Title) document.title = `${$t(meta.title)} | ${Title}`;
		else document.title = $t(meta.title);
	}

	/** 退出登录 */
	function logout() {
		useUserStoreHook().logOut();
	}

	function backTopMenu() {
		router.push(getTopMenu()?.path);
	}

	function onPanel() {
		emitter.emit('openPanel');
	}

	function toAccountSettings() {
		router.push({ name: 'AccountSettings' });
	}

	function toggleSideBar() {
		pureApp.toggleSideBar();
	}

	function handleResize(menuRef) {
		menuRef?.handleResize();
	}

	function resolvePath(route) {
		if (!route.children) return console.error(errorInfo);
		const httpReg = /^http(s?):\/\//;
		const routeChildPath = route.children[0]?.path;
		if (httpReg.test(routeChildPath)) {
			return route.path + '/' + routeChildPath;
		} else {
			return routeChildPath;
		}
	}

	function menuSelect(indexPath: string) {
		if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
		emitter.emit('changLayoutRoute', indexPath);
	}

	/** 判断路径是否参与菜单 */
	function isRemaining(path: string) {
		return remainingPaths.includes(path);
	}

	/** 获取`logo` */
	function getLogo() {
		return new URL('/logo.svg', import.meta.url).href;
	}

	return {
		title,
		copyright,
		device,
		layout,
		logout,
		routers,
		$storage,
		isFullscreen,
		Fullscreen,
		ExitFullscreen,
		toggle,
		backTopMenu,
		onPanel,
		getDivStyle,
		changeTitle,
		toggleSideBar,
		menuSelect,
		handleResize,
		resolvePath,
		getLogo,
		isCollapse,
		pureApp,
		username,
		userAvatar,
		avatarsStyle,
		tooltipEffect,
		toAccountSettings,
		getDropdownItemStyle,
		getDropdownItemClass,
	};
}