You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.2 KiB
99 lines
2.2 KiB
<script lang="ts" setup>
|
|
import { computed, onMounted, ref, unref, watch } from 'vue'
|
|
import { useAppStore } from '@/store/modules/app'
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
|
|
defineOptions({ name: 'Logo' })
|
|
|
|
const { getPrefixCls } = useDesign()
|
|
|
|
const prefixCls = getPrefixCls('logo')
|
|
|
|
const appStore = useAppStore()
|
|
|
|
const show = ref(true)
|
|
|
|
const title = computed(() => appStore.getTitle)
|
|
|
|
const layout = computed(() => appStore.getLayout)
|
|
|
|
const collapse = computed(() => appStore.getCollapse)
|
|
const timer = ref<NodeJS.Timeout | number>()
|
|
|
|
onMounted(() => {
|
|
if (unref(collapse)) show.value = false
|
|
})
|
|
|
|
watch(
|
|
() => collapse.value,
|
|
(collapse: boolean) => {
|
|
if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
|
|
show.value = true
|
|
return
|
|
}
|
|
if (!collapse) {
|
|
timer.value = setTimeout(() => {
|
|
show.value = !collapse
|
|
if(timer.value){
|
|
clearTimeout(timer.value)
|
|
timer.value = 0
|
|
}
|
|
}, 400)
|
|
} else {
|
|
show.value = !collapse
|
|
}
|
|
}
|
|
)
|
|
onBeforeUnmount(() => {
|
|
if(timer.value){
|
|
clearTimeout(timer.value)
|
|
timer.value = 0
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => layout.value,
|
|
(layout) => {
|
|
if (layout === 'top' || layout === 'cutMenu') {
|
|
show.value = true
|
|
} else {
|
|
if (unref(collapse)) {
|
|
show.value = false
|
|
} else {
|
|
show.value = true
|
|
}
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<router-link
|
|
:class="[
|
|
prefixCls,
|
|
layout !== 'classic' ? `${prefixCls}__Top` : '',
|
|
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden'
|
|
]"
|
|
to="/"
|
|
>
|
|
<img
|
|
class="h-[calc(var(--logo-height)-24px)] w-[calc(var(--logo-height)-10px)]"
|
|
src="@/assets/imgs/logo.png"
|
|
/>
|
|
<div
|
|
v-if="show"
|
|
:class="[
|
|
'ml-10px text-16px font-700',
|
|
{
|
|
'text-[var(--logo-title-text-color)]': layout === 'classic',
|
|
'text-[var(--top-header-text-color)]':
|
|
layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
|
|
}
|
|
]"
|
|
>
|
|
{{ title }}
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|