Bilibili-Evolved/registry/lib/components/style/custom-navbar/logo/NavbarLogo.vue
2025-04-01 08:47:28 +08:00

110 lines
2.3 KiB
Vue

<template>
<div class="custom-navbar-logo-container">
<VIcon
v-if="!seasonLogoUrl"
icon="logo"
class="custom-navbar-logo"
:class="{ theme: useThemeColor }"
></VIcon>
<div
v-else
class="custom-navbar-logo season"
:style="{ backgroundImage: `url(${seasonLogoUrl})` }"
/>
</div>
</template>
<script lang="ts">
import { addComponentListener } from '@/core/settings'
import { getJson } from '@/core/ajax'
import { VIcon } from '@/ui'
export default Vue.extend({
name: 'NavbarLogo',
components: {
VIcon,
},
data() {
return {
seasonLogoUrl: '',
useThemeColor: true,
}
},
watch: {
seasonLogoUrl() {
document.body.classList.toggle('season-logo-enabled', Boolean(this.seasonLogoUrl))
},
},
async created() {
addComponentListener(
'customNavbar.seasonLogo',
async (value: boolean) => {
if (!value) {
this.seasonLogoUrl = ''
return
}
const json = await getJson('https://api.bilibili.com/x/web-show/page/header?resource_id=1')
if (json.code !== 0) {
this.seasonLogoUrl = ''
return
}
this.seasonLogoUrl = lodash.get(json, 'data.litpic', '').replace('http:', 'https:')
},
true,
)
addComponentListener(
'customNavbar.themeLogo',
async (value: boolean) => {
this.useThemeColor = value
},
true,
)
},
})
</script>
<style lang="scss">
@import 'common';
.custom-navbar-logo-container {
@include v-stretch();
justify-content: center;
height: 100%;
padding: 8px 0;
box-sizing: border-box;
max-height: 54px;
width: calc(var(--navbar-height) * 1.3);
}
.custom-navbar-logo {
.custom-navbar:not(.fill) &:not(.season) {
body.dark & {
color: #fff;
}
&.theme {
color: var(--theme-color);
body.dark & {
color: var(--theme-color);
}
}
}
&.be-icon {
--size: calc(var(--navbar-height) / 2) !important;
width: 100%;
max-height: 32px;
}
&.season {
height: 0;
flex: 1 0 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 0 2px #0002);
}
}
body.season-logo-enabled {
.bili-header .inner-logo {
display: none !important;
}
}
</style>