hookehuyr

refactor(search): 搜索 Tab 显示结果数量

- 将 tabsData 从静态数组改为动态 computed
- 在 tab 名称后显示结果数量,如"产品 (5)"
- 新增 filter-tab-count 样式,字号 24rpx,透明度 0.8
- 优化用户对搜索结果的预览体验

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
......@@ -51,7 +51,10 @@
]"
@tap="onTabClick(item.id)"
>
<text class="filter-tab-text">{{ item.name }}</text>
<text class="filter-tab-text">
{{ item.name }}
<text v-if="item.count > 0" class="filter-tab-count">({{ item.count }})</text>
</text>
</view>
</view>
</template>
......@@ -195,11 +198,19 @@ const currentPage = ref(0) // 当前页码(从0开始)
const pageSize = 20 // 每页数量
/**
* Tab 数据源(只保留产品和文章
* Tab 数据源(动态显示结果数量
*/
const tabsData = ref([
{ id: 'product', name: '产品' },
{ id: 'article', name: '文章' },
const tabsData = computed(() => [
{
id: 'product',
name: '产品',
count: hasSearched.value ? productsTotal.value : 0
},
{
id: 'article',
name: '文章',
count: hasSearched.value ? articlesTotal.value : 0
}
])
/**
......@@ -557,6 +568,13 @@ const handleCollectChanged = (item, newStatus) => {
font-weight: 500;
}
.filter-tab-count {
font-size: 24rpx;
font-weight: 400;
margin-left: 4rpx;
opacity: 0.8;
}
// 覆盖 NutUI Tabs 默认样式
:deep(.nut-tabs__titles) {
display: none;
......