fix: 回滚博客头部collapse结构

src/__tests__/App.spec.ts

@@ -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);
   });
 

src/components/blog/BlogHeader.tsx

@@ -88,36 +88,9 @@ export default defineComponent({
                 </RouterLink>
               </div>
 
-              <ul class="kt-blog__header-nav kt-blog__header-nav--hover">
+              <div class="kt-blog__header-collapse">
-                {siteConfig.value.headerMenu.map((item) => (
+                <div class="kt-blog__header-collapse-head">
-                  <li key={item.label} class="kt-blog__header-nav-item">
+                  <div class="kt-blog__header-mobile-search">
-                    {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">
@@ -125,26 +98,72 @@ export default defineComponent({
                         </span>
                       </div>
                       <BlogInput
-                        ref={navSearchInputRef}
+                        class="kt-blog__header-mobile-search-input kt-blog__input"
-                        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>
+                </div>
-              </ul>
+
+                <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

src/styles/toolbar.scss

@@ -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 {