hotline-web/src/App.vue

<template>
	<el-config-provider :size="getGlobalComponentSize" :locale="zhCn" :message="messageConfig" :button="buttonConfig">
    <el-watermark :content="watermarkText" class="h100">
      <router-view v-show="setLockScreen" />
      <LockScreen v-if="themeConfig.isLockScreen" />
      <Setings ref="setingsRef" v-show="setLockScreen" />
      <CloseFull v-if="!themeConfig.isLockScreen" />
    </el-watermark>
	</el-config-provider>
</template>

<script lang="ts" name="app" setup>
import { computed, ref, onBeforeMount, onMounted, onUnmounted, 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';
// 引入组件
const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
const Setings = 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 watermarkText = computed(() => {
  // 防止锁屏后，刷新出现不相关界面
  // https://gitee.com/lyt-top/vue-next-admin/issues/I6AF8P
  return themeConfig.value.watermarkText;
});

// 可同时显示的消息最大数量
const messageConfig = reactive<any>({
	max: 3,
});
// 自动在两个中文字符之间插入空格
const buttonConfig = reactive<any>({
	autoInsertSpace: false,
});
// 获取全局组件大小
const getGlobalComponentSize = computed(() => {
	return other.globalComponentSize();
});
// 布局配置弹窗打开
const setingsRef = ref<RefType>();
const openSetingsDrawer = () => {
	setingsRef.value.openDrawer();
};
// 设置初始化，防止刷新时恢复默认
onBeforeMount( async() => {
  if(!themeConfig.value.globalTitle) {
    // 获取登录页的背景图和系统名称等
    const res: any = await loginPageInfo();
    const globalTitle = res.result.sysName.join('|') ?? ''; // 标题名称
    const  loginImage = res.result.loginImage ? `url${res.result.loginImage}` : `url(${getImageUrl('login/bg.png')})`; // 登录页背景图
    storesThemeConfig.setThemeConfig(Object.assign(themeConfig.value, { globalTitle, loginImage }));
  }
	// 设置批量第三方 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('openSetingsDrawer', () => {
        openSetingsDrawer();
      });

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

    } catch (error) {
      console.log(error);
    }
	});
});
// 清除缓存 name
const clearCacheTagsView = async (routeName: string) => {
	let item: any = {};
	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监听
onUnmounted(() => {
	mittBus.off('openSetingsDrawer', () => {});
	mittBus.off('clearCache', () => {});
});
// 监听路由的变化，设置网站标题
watch(
	() => route.path,
	() => {
		other.useTitle();
	},
	{
		deep: true,
	}
);
</script>