KTeam/kt-blog-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 回滚博客头部collapse结构

Browse Source
This commit is contained in:
sunlei 2026-07-01 14:51:01 +08:00
parent ce4a35dbd4
commit bc261f56b8
3 changed files with 68 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/__tests__/App.spec.ts
View File

@ -126,7 +126,7 @@ describe('App', () => {
expect(wrapper.text()).toContain('KwiTsukasa的小站');
});
it('renders Argon header without the old collapse container', async () => {
it('renders Argon header with the WordPress Argon collapse container', async () => {
await router.push('/');
await router.isReady();
@ -136,7 +136,7 @@ describe('App', () => {
},
});
expect(wrapper.find('.kt-blog__header-collapse').exists()).toBe(false);
expect(wrapper.find('.kt-blog__header-collapse').exists()).toBe(true);
expect(wrapper.find('.kt-blog__header-nav').exists()).toBe(true);
});

109
src/components/blog/BlogHeader.tsx
View File

@ -88,36 +88,9 @@ export default defineComponent({
</RouterLink>
</div>
<ul class="kt-blog__header-nav kt-blog__header-nav--hover">
{siteConfig.value.headerMenu.map((item) => (
<li key={item.label} class="kt-blog__header-nav-item">
{item.external ? (
<a
class="kt-blog__header-nav-link"
href={item.href}
rel="noopener noreferrer"
target="_blank"
>
{item.label}
</a>
) : (
<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__header-collapse">
<div class="kt-blog__header-collapse-head">
<div class="kt-blog__header-mobile-search">
<div class="kt-blog__input-group">
<div class="kt-blog__input-addon-wrap">
<span class="kt-blog__input-addon">
@ -125,26 +98,72 @@ export default defineComponent({
</span>
</div>
<BlogInput
ref={navSearchInputRef}
class="kt-blog__header-search-input kt-blog__input"
class="kt-blog__header-mobile-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>
</li>
</ul>
</div>
<ul class="kt-blog__header-nav kt-blog__header-nav--hover">
{siteConfig.value.headerMenu.map((item) => (
<li key={item.label} class="kt-blog__header-nav-item">
{item.external ? (
<a
class="kt-blog__header-nav-link"
href={item.href}
rel="noopener noreferrer"
target="_blank"
>
{item.label}
</a>
) : (
<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>
</li>
</ul>
</div>
<div class="kt-blog__header-menu-mask" />
<BlogButton

3
src/styles/toolbar.scss
View File

@ -46,10 +46,11 @@
font-weight: 700;
}
&__header-nav--hover {
&__header-collapse {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
}
&__header-nav {