hotline-web/src/App.vue

<template>
	<el-config-provider :size="getGlobalComponentSize" :locale="zhCn" :message="messageConfig" :button="buttonConfig">
		<router-view v-show="setLockScreen" />
		<LockScreen v-if="themeConfig.isLockScreen" />
		<SetTings ref="setTingsRef" v-show="setLockScreen" />
		<CloseFull v-if="!themeConfig.isLockScreen" />
	</el-config-provider>
</template>

<script lang="ts" name="app" setup>
import { computed, ref, onBeforeMount, onMounted, onBeforeUnmount, nextTick, watch, reactive, defineAsyncComponent } from 'vue';
import { useRoute } from 'vue-router';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes';
import { useThemeConfig } from '@/stores/themeConfig';
import other from '@/utils/other';
import checkUpdate from '@/utils/checkUpdate';
import mittBus from '@/utils/mitt';
import { Session, Local } from '@/utils/storage';
import setIntroduction from '@/utils/setIconfont';
import { loginPageInfo } from '@/api/login';
import { getImageUrl } from '@/utils/tools';
import { useKeepALiveNames } from '@/stores/keepAliveNames';
import { useFavicon } from '@vueuse/core';
import { getCurrentCityConfig } from '@/utils/appConfig';
// 引入组件
const LockScreen = defineAsyncComponent(() => import('@/layout/lockScreen/index.vue'));
const SetTings = defineAsyncComponent(() => import('@/layout/navBars/breadcrumb/setings.vue'));
const CloseFull = defineAsyncComponent(() => import('@/layout/navBars/breadcrumb/closeFull.vue'));

const route = useRoute();
const stores = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const storesKeepALiveNames = useKeepALiveNames();
const storesTagsViewRoutes = useTagsViewRoutes();
const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);

// 设置锁屏时组件显示隐藏
const setLockScreen = computed(() => {
	// 防止锁屏后，刷新出现不相关界面
	// https://gitee.com/lyt-top/vue-next-admin/issues/I6AF8P
	return !themeConfig.value.isLockScreen;
});

// 可同时显示的消息最大数量
const messageConfig = reactive<any>({
	max: 3,
});
// 自动在两个中文字符之间插入空格
const buttonConfig = reactive<any>({
	autoInsertSpace: false,
});
// 获取全局组件大小
const getGlobalComponentSize = computed(() => {
	return other.globalComponentSize();
});
// 布局配置弹窗打开
const setTingsRef = ref<RefType>();
const openSetTingsDrawer = () => {
	setTingsRef.value.openDrawer();
};
// 设置初始化，防止刷新时恢复默认
onBeforeMount(async () => {
	// 获取登录页的背景图和系统名称等
	const { result } = await loginPageInfo();
	const globalTitle = result.sysName.join('|') ?? ''; // 标题名称
	const loginImage = result.loginImage ? `url(${result.loginImage})` : `url(${getImageUrl('login/login_bg.png')})`; // 登录页背景图
	const isLoginMessageCode = result.isLoginMessageCode; // 是否开启短信验证码
	const appScope = result.appScope ?? 'YiBin';
	const callCenterType = result.callCenterType ?? 'TianRun';
	storesThemeConfig.setThemeConfig(Object.assign(themeConfig.value, { globalTitle, loginImage, isLoginMessageCode, appScope, callCenterType }));
	// 设置批量第三方 icon 图标
	setIntroduction.cssCdn();
	// 设置批量第三方 js
	setIntroduction.jsCdn();
});
// 页面加载时
onMounted(() => {
	nextTick(async () => {
		try {
			// 获取缓存中的布局配置
			if (Local.get('themeConfig')) {
				storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
				document.documentElement.style.cssText = Local.get('themeConfigStyle');
			}

			// 开发环境不提示更新
			if (import.meta.env.VITE_MODE_NAME != 'development') {
				// 监听是否更新
				await checkUpdate();
			}
			// 监听布局配置弹窗点击打开
			mittBus.on('openSetTingsDrawer', () => {
				openSetTingsDrawer();
			});

			// 获取缓存中的全屏配置
			if (Session.get('isTagsViewCurrenFull')) {
				stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
			}
			// 清除某个页面的缓存
			mittBus.on('clearCache', (view: any) => {
				clearCacheTagsView(view);
			});
			// 解决火狐拖动打开新窗口
			document.body.ondrop = (event) => {
				event.preventDefault();
				event.stopPropagation();
			};
			/*mittBus.on('*', (index, data) => {
        console.log(index, data);
      });*/

			// 动态修改icon
			const icon = useFavicon();
			const { favicon } = getCurrentCityConfig();
			icon.value = getImageUrl(favicon); // 更改当前左上角角标
		} catch (error) {
			console.log(error);
		}
	});
});
// 清除缓存 name
const clearCacheTagsView = async (routeName: string) => {
	let item;
	tagsViewRoutes.value.forEach((v: any) => {
		if (v.name === routeName) {
			item = v;
		}
	});
	if (!item) return false;
	await storesKeepALiveNames.delCachedView(item);
	if (item.meta?.isKeepAlive) await storesKeepALiveNames.addCachedView(item);
};
// 页面销毁时，关闭监听布局配置/i18n监听
onBeforeUnmount(() => {
	mittBus.off('openSetTingsDrawer', () => {});
	mittBus.off('clearCache', () => {});
});
// 监听路由的变化，设置网站标题
watch(
	() => route.path,
	() => {
		other.useTitle();
	},
	{
		deep: true,
	}
);
</script>