提交 264d47d5 authored 作者: lidongxu's avatar lidongxu

refactor(water): 解决:water 水印在移动端滚动超出 100% 屏幕高度外的不显示水印问题,以及飞书客户端内不重复显示水印问题

上级 8cf67bd5
<template>
<template v-if="!isInWhiteList">
<template v-if="shouldShowWatermark">
<el-watermark :font="font"
:content="content"
class="wm-class">
class="wm-class"
:class="{'wm-mobile-class': isMobile}">
<router-view />
</el-watermark>
</template>
......@@ -16,13 +17,30 @@ import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
import useUserStore from '@/store/modules/user'
import { isWhiteList } from '@/permission'
import { isMobile } from '@/utils'
const route = useRoute()
/*************** 水印相关 *************** */
const isInWhiteList = computed(() => isWhiteList(route.path))
const isInFeishu = computed(() => {
const userAgent = navigator.userAgent.toLowerCase()
// 检测飞书用户代理标识
return userAgent.includes('lark') || userAgent.includes('feishu')
})
const shouldShowWatermark = computed(() => {
// 既不在飞书也不在白名单则显示水印
return !isInWhiteList.value && !isInFeishu.value
})
// 水印显示内容
const content = computed(() => {
return useUserStore().userInfo.nickName + ' ' + useUserStore().userInfo.phonenumber?.substring(7)
})
// 水印字体,暗黑模式切换水印文字颜色
const isDark = computed(() => {
return useSettingsStore().isDark
})
......@@ -51,8 +69,13 @@ onMounted(() => {
<style scoped
lang="scss">
.wm-class{
.wm-class {
min-height: 100%;
height: 100%;
}
.wm-mobile-class{
min-height: 100%;
height: auto;
}
</style>
......@@ -43,6 +43,9 @@ const modules = ref([]); // 替换原有的静态modules
// 观察路由挂载后事件
// 格式化路由为菜单所需结构
const formatRoutesToModules = (routes) => {
// 把首页去除掉
// 把首页去除掉
routes = routes.filter(route => route.path !== '');
// 根据实际路由结构转换,这里假设需要提取一级路由作为模块
modules.value = routes.map(o => {
return {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论