106 lines
2.5 KiB
Vue
106 lines
2.5 KiB
Vue
<template>
|
|
<div class="app-logo anticon" :class="theme" @click="handleGoHome" :style="wrapStyle">
|
|
<img src="/@/assets/images/logo.png" />
|
|
<div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { computed, defineComponent, PropType, ref, watch } from 'vue';
|
|
// hooks
|
|
import { useGlobSetting } from '/@/settings/use';
|
|
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
|
|
import { useGo } from '/@/hooks/web/usePage';
|
|
|
|
import { PageEnum } from '/@/enums/pageEnum';
|
|
import { MenuTypeEnum } from '/@/enums/menuEnum';
|
|
|
|
import { menuStore } from '/@/store/modules/menu';
|
|
import { appStore } from '/@/store/modules/app';
|
|
|
|
export default defineComponent({
|
|
name: 'Logo',
|
|
props: {
|
|
showTitle: {
|
|
type: Boolean as PropType<boolean>,
|
|
default: true,
|
|
},
|
|
theme: {
|
|
type: String,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const showRef = ref<boolean>(!!props.showTitle);
|
|
const globSetting = useGlobSetting();
|
|
const go = useGo();
|
|
|
|
function handleGoHome() {
|
|
go(PageEnum.BASE_HOME);
|
|
}
|
|
|
|
watch(
|
|
() => props.showTitle,
|
|
(show: boolean) => {
|
|
if (show) {
|
|
useTimeoutFn(() => {
|
|
showRef.value = show;
|
|
}, 280);
|
|
} else {
|
|
showRef.value = show;
|
|
}
|
|
}
|
|
);
|
|
|
|
const wrapStyle = computed(() => {
|
|
const { getCollapsedState } = menuStore;
|
|
const {
|
|
menuSetting: { menuWidth, type },
|
|
} = appStore.getProjectConfig;
|
|
const miniWidth = { minWidth: `${menuWidth}px` };
|
|
if (type !== MenuTypeEnum.SIDEBAR) {
|
|
return miniWidth;
|
|
}
|
|
return getCollapsedState ? {} : miniWidth;
|
|
});
|
|
|
|
return {
|
|
handleGoHome,
|
|
globSetting,
|
|
show: showRef,
|
|
wrapStyle,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import (reference) '../../design/index.less';
|
|
|
|
.app-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 16px;
|
|
cursor: pointer;
|
|
// justify-content: center;
|
|
&.light {
|
|
border-bottom: 1px solid @border-color-base;
|
|
}
|
|
|
|
.logo-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
.respond-to(medium,{
|
|
opacity: 1;
|
|
});
|
|
}
|
|
|
|
// &.dark .logo-title {
|
|
// font-weight: 400;
|
|
// }
|
|
|
|
&.light .logo-title {
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
</style>
|