<script lang="ts" setup>
|
import { computed, onBeforeUnmount, onMounted, watch } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
|
import { useWatermark } from '@vben/hooks';
|
import { BasicLayout } from '@vben/layouts';
|
import { useTabbarStore, useUserStore } from '@vben/stores';
|
|
import { useWebSocket } from '#/hooks/web/useWebSocket';
|
import { useAuthStore, useBaseStore } from '#/store';
|
import { getJnpfAppEnCode, getRealJnpfAppEnCode } from '#/utils/jnpf';
|
|
import FullScreen from './header/full-screen.vue';
|
import HeaderCustom from './header/index.vue';
|
// import Languagetoggle from './header/language-toggle.vue';
|
import TenantDropDown from './header/tenant-dropdown/index.vue';
|
import UserDropDown from './header/user-dropdown/index.vue';
|
import LockScreen from './lock-screen.vue';
|
import Logo from './logo.vue';
|
import SystemToggle from './system-toggle.vue';
|
import { getWatermarkContent, getWatermarkIdentity, isGlobalWatermarkEnabled } from './watermark';
|
|
const userStore = useUserStore();
|
const authStore = useAuthStore();
|
const baseStore = useBaseStore();
|
const globSetting = useGlobSetting();
|
const { destroyWatermark, updateWatermark } = useWatermark();
|
const { initWebSocket } = useWebSocket();
|
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
const getWatermarkEnabled = computed(() => isGlobalWatermarkEnabled(baseStore.sysConfigInfo.globalWatermarkEnabled));
|
const getUserWatermarkIdentity = computed(() => getWatermarkIdentity(getUserInfo.value));
|
const avatar = computed(() => {
|
return globSetting.apiURL + userStore.userInfo?.headIcon;
|
});
|
const getShowSystemToggleIcon = computed(() => {
|
const appEnCode = getJnpfAppEnCode();
|
return !!appEnCode && !['teamwork', 'workFlow'].includes(appEnCode);
|
});
|
|
async function handleLogout() {
|
await authStore.logout(false);
|
}
|
|
const WATERMARK_REFRESH_INTERVAL = 10_000;
|
let watermarkTimer: number | undefined;
|
let watermarkOperation = 0;
|
let watermarkUpdateQueue = Promise.resolve();
|
let watermarkErrorLogged = false;
|
|
function clearWatermarkTimer() {
|
if (watermarkTimer !== undefined) window.clearInterval(watermarkTimer);
|
watermarkTimer = undefined;
|
}
|
|
function queueWatermarkUpdate(operation: number) {
|
watermarkUpdateQueue = watermarkUpdateQueue
|
.catch(() => undefined)
|
.then(async () => {
|
if (operation !== watermarkOperation || !getWatermarkEnabled.value) return;
|
try {
|
await updateWatermark({ content: getWatermarkContent(getUserInfo.value) });
|
if (operation !== watermarkOperation || !getWatermarkEnabled.value) destroyWatermark();
|
watermarkErrorLogged = false;
|
} catch (error) {
|
if (operation !== watermarkOperation) return;
|
clearWatermarkTimer();
|
destroyWatermark();
|
if (!watermarkErrorLogged) {
|
console.error('Failed to update the global page watermark.', error);
|
watermarkErrorLogged = true;
|
}
|
}
|
});
|
}
|
|
function stopWatermark() {
|
const operation = ++watermarkOperation;
|
clearWatermarkTimer();
|
destroyWatermark();
|
watermarkUpdateQueue = watermarkUpdateQueue
|
.catch(() => undefined)
|
.then(() => {
|
if (operation === watermarkOperation) destroyWatermark();
|
});
|
}
|
|
function startWatermark() {
|
stopWatermark();
|
const operation = ++watermarkOperation;
|
queueWatermarkUpdate(operation);
|
watermarkTimer = window.setInterval(() => queueWatermarkUpdate(operation), WATERMARK_REFRESH_INTERVAL);
|
}
|
|
watch(
|
[getWatermarkEnabled, getUserWatermarkIdentity],
|
([enable]) => {
|
if (enable) startWatermark();
|
else stopWatermark();
|
},
|
{ immediate: true },
|
);
|
|
function init() {
|
const appEnCode = getJnpfAppEnCode();
|
if (['teamwork', 'workFlow'].includes(appEnCode) || appEnCode !== getRealJnpfAppEnCode()) {
|
const { setMenuList } = useTabbarStore();
|
setMenuList(['close', 'affix', 'reload', 'close-left', 'close-right', 'close-other', 'close-all']);
|
}
|
}
|
|
onMounted(() => {
|
init();
|
initWebSocket();
|
});
|
onBeforeUnmount(stopWatermark);
|
</script>
|
|
<template>
|
<BasicLayout @clear-preferences-and-logout="handleLogout">
|
<template #logo>
|
<Logo />
|
</template>
|
<template #header-left-1 v-if="getShowSystemToggleIcon">
|
<SystemToggle />
|
</template>
|
<template #user-dropdown>
|
<UserDropDown />
|
</template>
|
<template #lock-screen>
|
<LockScreen :avatar @to-login="handleLogout" />
|
</template>
|
<template #header-fullscreen>
|
<FullScreen />
|
</template>
|
<template #header-right-51>
|
<HeaderCustom />
|
</template>
|
<!-- <template v-if="preferences.widget.languageToggle" #header-right-81>
|
<Languagetoggle />
|
</template> -->
|
<template #header-right-91 v-if="getUserInfo?.isSaas">
|
<TenantDropDown />
|
</template>
|
</BasicLayout>
|
</template>
|
