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 @@ ...@@ -51,7 +51,10 @@
51 ]" 51 ]"
52 @tap="onTabClick(item.id)" 52 @tap="onTabClick(item.id)"
53 > 53 >
54 - <text class="filter-tab-text">{{ item.name }}</text> 54 + <text class="filter-tab-text">
55 + {{ item.name }}
56 + <text v-if="item.count > 0" class="filter-tab-count">({{ item.count }})</text>
57 + </text>
55 </view> 58 </view>
56 </view> 59 </view>
57 </template> 60 </template>
...@@ -195,11 +198,19 @@ const currentPage = ref(0) // 当前页码(从0开始) ...@@ -195,11 +198,19 @@ const currentPage = ref(0) // 当前页码(从0开始)
195 const pageSize = 20 // 每页数量 198 const pageSize = 20 // 每页数量
196 199
197 /** 200 /**
198 - * Tab 数据源(只保留产品和文章 201 + * Tab 数据源(动态显示结果数量
199 */ 202 */
200 -const tabsData = ref([ 203 +const tabsData = computed(() => [
201 - { id: 'product', name: '产品' }, 204 + {
202 - { id: 'article', name: '文章' }, 205 + id: 'product',
206 + name: '产品',
207 + count: hasSearched.value ? productsTotal.value : 0
208 + },
209 + {
210 + id: 'article',
211 + name: '文章',
212 + count: hasSearched.value ? articlesTotal.value : 0
213 + }
203 ]) 214 ])
204 215
205 /** 216 /**
...@@ -557,6 +568,13 @@ const handleCollectChanged = (item, newStatus) => { ...@@ -557,6 +568,13 @@ const handleCollectChanged = (item, newStatus) => {
557 font-weight: 500; 568 font-weight: 500;
558 } 569 }
559 570
571 +.filter-tab-count {
572 + font-size: 24rpx;
573 + font-weight: 400;
574 + margin-left: 4rpx;
575 + opacity: 0.8;
576 +}
577 +
560 // 覆盖 NutUI Tabs 默认样式 578 // 覆盖 NutUI Tabs 默认样式
561 :deep(.nut-tabs__titles) { 579 :deep(.nut-tabs__titles) {
562 display: none; 580 display: none;
......