<script setup lang="ts">
|
import { computed } from 'vue';
|
|
import { useGlobSetting, useGo } from '@jnpf/hooks';
|
|
import { preferences, usePreferences } from '@vben/preferences';
|
import { useUserStore } from '@vben/stores';
|
|
import defaultLogo from '#/assets/images/jnpf.png';
|
import { useBaseStore } from '#/store';
|
import { getRealJnpfAppEnCode } from '#/utils/jnpf';
|
|
defineOptions({ name: 'JnpfLogo' });
|
|
const userStore = useUserStore();
|
const baseStore = useBaseStore();
|
const globSetting = useGlobSetting();
|
|
const go = useGo();
|
const { isHeaderNav, isMixedNav, isMobile, isSideMixedNav, isHeaderMixedNav, isHeaderSidebarNav, sidebarCollapsed } = usePreferences();
|
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
const getSysConfig = computed(() => baseStore.sysConfigInfo);
|
const getIsChildApp = computed(() => {
|
const appEnCode = getRealJnpfAppEnCode();
|
return appEnCode && !['teamwork', 'workFlow'].includes(appEnCode);
|
});
|
const getCollapsed = computed(() => {
|
if (isMobile.value && sidebarCollapsed.value) {
|
return true;
|
}
|
if (isHeaderNav.value || isMixedNav.value || isHeaderSidebarNav.value) {
|
return false;
|
}
|
return sidebarCollapsed.value || isSideMixedNav.value || isHeaderMixedNav.value;
|
});
|
const logoClass = computed(() => {
|
const { collapsedShowTitle } = preferences.sidebar;
|
const classes: string[] = [];
|
|
if ((collapsedShowTitle && sidebarCollapsed.value && !isMixedNav.value) || getCollapsed.value) {
|
classes.push('mx-auto');
|
}
|
|
if (isSideMixedNav.value) {
|
classes.push('flex-center');
|
}
|
|
return classes.join(' ');
|
});
|
|
function clickLogo() {
|
go(preferences.app.defaultHomePath);
|
}
|
</script>
|
|
<template>
|
<div class="flex h-full items-center text-lg" @click="clickLogo">
|
<div :class="logoClass" class="flex h-full cursor-pointer items-center gap-1 overflow-hidden px-[5px] text-lg leading-normal transition-all duration-500">
|
<template v-if="getIsChildApp">
|
<i class="jnpf-logo-icon" :class="getUserInfo?.systemIcon || ''"></i>
|
<span v-if="!getCollapsed" class="truncate text-nowrap font-medium text-foreground">
|
{{ getUserInfo.systemName }}
|
</span>
|
</template>
|
<template v-else>
|
<a-image class="jnpf-logo" :src="globSetting.apiURL + getSysConfig.logoIcon" :fallback="defaultLogo" :preview="false" v-if="getSysConfig?.logoIcon" />
|
<img class="jnpf-logo" :src="defaultLogo" v-else />
|
<span v-if="!getCollapsed" class="truncate text-nowrap font-medium text-foreground">
|
{{ getSysConfig.title }}
|
</span>
|
</template>
|
</div>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.jnpf-logo-icon {
|
display: block;
|
font-size: 30px;
|
text-align: center;
|
}
|
|
:deep(.ant-image),
|
.jnpf-logo {
|
width: 40px;
|
height: 40px;
|
|
.jnpf-logo {
|
width: 40px;
|
height: 40px;
|
}
|
}
|
</style>
|
