fix: 移除博客头部隐藏导航容器

This commit is contained in:
sunlei 2026-07-01 14:37:14 +08:00
parent 41da304569
commit 855af67140
4 changed files with 35 additions and 86 deletions

View File

@ -126,7 +126,7 @@ describe('App', () => {
expect(wrapper.text()).toContain('KwiTsukasa的小站'); expect(wrapper.text()).toContain('KwiTsukasa的小站');
}); });
it('renders Argon header without the old collapse container', async () => { it('renders Argon header without hidden navigation containers', async () => {
await router.push('/'); await router.push('/');
await router.isReady(); await router.isReady();
@ -137,7 +137,8 @@ describe('App', () => {
}); });
expect(wrapper.find('.kt-blog__header-collapse').exists()).toBe(false); expect(wrapper.find('.kt-blog__header-collapse').exists()).toBe(false);
expect(wrapper.find('.kt-blog__header-nav').exists()).toBe(true); expect(wrapper.find('.kt-blog__header-navbar .kt-blog__header-nav').exists()).toBe(false);
expect(wrapper.find('.kt-blog__header-navbar .navbar-nav').exists()).toBe(false);
}); });
it('loads local blog theme config by default', async () => { it('loads local blog theme config by default', async () => {

View File

@ -88,63 +88,38 @@ export default defineComponent({
</RouterLink> </RouterLink>
</div> </div>
<ul class="kt-blog__header-nav kt-blog__header-nav--hover"> <div
{siteConfig.value.headerMenu.map((item) => ( class={['kt-blog__header-search', navSearchOpen.value && 'kt-blog__header-search--open']}
<li key={item.label} class="kt-blog__header-nav-item"> onClick={() => {
{item.external ? ( navSearchOpen.value = true;
<a nextTick(() => focusInput(navSearchInputRef.value));
class="kt-blog__header-nav-link" }}
href={item.href} >
rel="noopener noreferrer" <div class="kt-blog__input-group">
target="_blank" <div class="kt-blog__input-addon-wrap">
> <span class="kt-blog__input-addon">
{item.label} <SearchOutlined />
</a> </span>
) : (
<RouterLink class="kt-blog__header-nav-link" to={item.href}>
{item.label}
</RouterLink>
)}
</li>
))}
</ul>
<ul class="kt-blog__header-nav kt-blog__header-nav--end">
<li class="kt-blog__header-search-item">
<div
class={['kt-blog__header-search', navSearchOpen.value && 'kt-blog__header-search--open']}
onClick={() => {
navSearchOpen.value = true;
nextTick(() => focusInput(navSearchInputRef.value));
}}
>
<div class="kt-blog__input-group">
<div class="kt-blog__input-addon-wrap">
<span class="kt-blog__input-addon">
<SearchOutlined />
</span>
</div>
<BlogInput
ref={navSearchInputRef}
class="kt-blog__header-search-input kt-blog__input"
placeholder="搜索什么..."
autocomplete="off"
v-model:value={keyword.value}
onClick={(event: MouseEvent) => event.stopPropagation()}
onBlur={() => {
navSearchOpen.value = false;
}}
onKeydown={(event: KeyboardEvent) => {
if (event.key === 'Enter') {
event.preventDefault();
submitSearch();
}
}}
/>
</div>
</div> </div>
</li> <BlogInput
</ul> ref={navSearchInputRef}
class="kt-blog__header-search-input kt-blog__input"
placeholder="搜索什么..."
autocomplete="off"
v-model:value={keyword.value}
onClick={(event: MouseEvent) => event.stopPropagation()}
onBlur={() => {
navSearchOpen.value = false;
}}
onKeydown={(event: KeyboardEvent) => {
if (event.key === 'Enter') {
event.preventDefault();
submitSearch();
}
}}
/>
</div>
</div>
<div class="kt-blog__header-menu-mask" /> <div class="kt-blog__header-menu-mask" />
<BlogButton <BlogButton

View File

@ -31,7 +31,6 @@
padding: 0 16px; padding: 0 16px;
} }
&__header-nav--hover,
&__header-search { &__header-search {
display: none; display: none;
} }

View File

@ -46,34 +46,9 @@
font-weight: 700; font-weight: 700;
} }
&__header-nav--hover {
display: flex;
flex: 1;
align-items: center;
}
&__header-nav {
display: flex;
align-items: center;
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
&__header-nav-link {
color: rgba(238, 238, 238, 0.78);
font-size: 14px;
&:hover,
&[aria-current='page'] {
color: var(--argon-title);
}
}
&__header-search { &__header-search {
width: 40px; width: 40px;
margin: 0; margin: 0 0 0 auto;
cursor: pointer; cursor: pointer;
transition: transition:
width 0.42s cubic-bezier(0.4, 0, 0, 1), width 0.42s cubic-bezier(0.4, 0, 0, 1),
@ -222,7 +197,6 @@
&__header-navbar--ontop, &__header-navbar--ontop,
&:not(.kt-blog--no-banner) &__header-navbar { &:not(.kt-blog--no-banner) &__header-navbar {
.kt-blog__header-title, .kt-blog__header-title,
.kt-blog__header-nav-link,
.kt-blog__header-search:not(.kt-blog__header-search--open) .kt-blog__input-addon, .kt-blog__header-search:not(.kt-blog__header-search--open) .kt-blog__input-addon,
.kt-blog__header-search.kt-blog__header-search--open .kt-blog__input-addon { .kt-blog__header-search.kt-blog__header-search--open .kt-blog__input-addon {
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);