fix(projects): fix header style & fix button highlight when click global-tab. fixed #446

This commit is contained in:
Soybean 2024-05-24 02:12:33 +08:00
parent bc8dc47d7f
commit 64fc0996e3
2 changed files with 10 additions and 2 deletions

View File

@ -47,7 +47,7 @@ const headerMenus = computed(() => {
</script> </script>
<template> <template>
<DarkModeContainer class="h-full flex-y-center shadow-header"> <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
<GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" /> <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
<HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" /> <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
<div v-else class="h-full flex-y-center flex-1-hidden"> <div v-else class="h-full flex-y-center flex-1-hidden">

View File

@ -141,6 +141,10 @@ function init() {
tabStore.initTabStore(route); tabStore.initTabStore(route);
} }
function removeFocus() {
(document.activeElement as HTMLElement)?.blur();
}
// watch // watch
watch( watch(
() => route.fullPath, () => route.fullPath,
@ -162,7 +166,11 @@ init();
<template> <template>
<DarkModeContainer class="size-full flex-y-center px-16px shadow-tab"> <DarkModeContainer class="size-full flex-y-center px-16px shadow-tab">
<div ref="bsWrapper" class="h-full flex-1-hidden"> <div ref="bsWrapper" class="h-full flex-1-hidden">
<BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }"> <BetterScroll
ref="bsScroll"
:options="{ scrollX: true, scrollY: false, click: appStore.isMobile }"
@click="removeFocus"
>
<div <div
ref="tabRef" ref="tabRef"
class="h-full flex pr-18px" class="h-full flex pr-18px"