feat: searchbar集成到header

This commit is contained in:
Tim
2025-10-17 16:54:03 +08:00
parent bf7df629cc
commit dfb31771ff
4 changed files with 12 additions and 10 deletions

View File

@@ -308,7 +308,6 @@ export default {
border: 1px solid var(--normal-border-color); border: 1px solid var(--normal-border-color);
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
margin-bottom: 4px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -331,6 +330,7 @@ export default {
z-index: 10000; z-index: 10000;
max-height: 300px; max-height: 300px;
min-width: 350px; min-width: 350px;
margin-top: 4px;
overflow-y: auto; overflow-y: auto;
} }

View File

@@ -26,6 +26,11 @@
<ClientOnly> <ClientOnly>
<div class="header-content-right"> <div class="header-content-right">
<SearchDropdown
ref="searchDropdown"
v-if="!isMobile || showSearch"
@close="closeSearch"
/>
<!-- 搜索 --> <!-- 搜索 -->
<ToolTip v-if="isMobile" content="搜索" placement="bottom"> <ToolTip v-if="isMobile" content="搜索" placement="bottom">
<div class="header-icon-item" @click="search"> <div class="header-icon-item" @click="search">
@@ -106,7 +111,6 @@
</div> </div>
</div> </div>
</ClientOnly> </ClientOnly>
<SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
</div> </div>
</header> </header>
</template> </template>

View File

@@ -144,8 +144,7 @@ defineExpose({
<style scoped> <style scoped>
.search-dropdown { .search-dropdown {
margin-top: 20px; width: 300px;
width: 500px;
} }
.search-mobile-trigger { .search-mobile-trigger {
@@ -154,7 +153,7 @@ defineExpose({
} }
.search-input { .search-input {
padding: 10px; padding: 2px 10px;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;

View File

@@ -2,7 +2,7 @@
<div class="home-page"> <div class="home-page">
<div v-if="!isMobile" class="search-container"> <div v-if="!isMobile" class="search-container">
<div class="search-title">一切可能从此刻启航在此遇见灵感与共鸣</div> <div class="search-title">一切可能从此刻启航在此遇见灵感与共鸣</div>
<SearchDropdown /> <!-- <SearchDropdown /> -->
</div> </div>
<div class="topic-container"> <div class="topic-container">
@@ -379,7 +379,6 @@ onBeforeUnmount(() => {
/** 供 InfiniteLoadMore 重建用的 key筛选/Tab 改变即重建内部状态 */ /** 供 InfiniteLoadMore 重建用的 key筛选/Tab 改变即重建内部状态 */
const ioKey = computed(() => asyncKey.value.join('::')) const ioKey = computed(() => asyncKey.value.join('::'))
// 页面选项同步到全局状态 // 页面选项同步到全局状态
watch([selectedCategory, selectedTags], ([newCategory, newTags]) => { watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
selectedCategoryGlobal.value = newCategory selectedCategoryGlobal.value = newCategory