hookehuyr

fix(search): 统一 Tab 样式并优化搜索结果布局

- 将 Tab 样式统一为与 plan 页面一致(padding: 24rpx)
- 移除 Tab 的固定高度,改为自适应
- 优化搜索结果计数位置(从滚动区域内移到外部)
- 移除空状态图片,使用纯文字提示
- 调整列表容器布局,移除多余的 padding

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
...@@ -45,20 +45,20 @@ ...@@ -45,20 +45,20 @@
45 </template> 45 </template>
46 </nut-tabs> 46 </nut-tabs>
47 47
48 + <!-- Result Count -->
49 + <view v-if="searchResults.length > 0" class="text-[#6B7280] text-[24rpx] mb-[24rpx]">
50 + 找到 {{ searchResults.length }} 个相关结果
51 + </view>
52 +
48 <!-- 可滚动列表区域 --> 53 <!-- 可滚动列表区域 -->
49 <view 54 <view
50 - class="flex-1 min-h-0 overflow-y-auto px-[40rpx] pb-[calc(160rpx+env(safe-area-inset-bottom))] box-border" 55 + class="flex-1 min-h-0 overflow-y-auto pb-[calc(160rpx+env(safe-area-inset-bottom))] box-border"
51 > 56 >
52 <!-- Search Results --> 57 <!-- Search Results -->
53 <view 58 <view
54 v-if="searchResults.length > 0" 59 v-if="searchResults.length > 0"
55 :key="listRenderKey" 60 :key="listRenderKey"
56 > 61 >
57 - <!-- Result Count -->
58 - <view class="text-[#6B7280] text-[24rpx] mb-[24rpx]">
59 - 找到 {{ searchResults.length }} 个相关结果
60 - </view>
61 -
62 <!-- Results List --> 62 <!-- Results List -->
63 <view class="flex flex-col gap-[24rpx] pb-[40rpx]"> 63 <view class="flex flex-col gap-[24rpx] pb-[40rpx]">
64 <!-- Product/Material Card --> 64 <!-- Product/Material Card -->
...@@ -112,11 +112,11 @@ ...@@ -112,11 +112,11 @@
112 112
113 <!-- Empty State (已搜索但无结果) --> 113 <!-- Empty State (已搜索但无结果) -->
114 <view v-else-if="hasSearched && searchResults.length === 0" class="flex flex-col items-center justify-center py-[120rpx]"> 114 <view v-else-if="hasSearched && searchResults.length === 0" class="flex flex-col items-center justify-center py-[120rpx]">
115 - <image 115 + <!-- <image
116 class="w-[320rpx] h-[320rpx] mb-[40rpx]" 116 class="w-[320rpx] h-[320rpx] mb-[40rpx]"
117 src="https://picsum.photos/seed/empty/320/320" 117 src="https://picsum.photos/seed/empty/320/320"
118 mode="aspectFit" 118 mode="aspectFit"
119 - /> 119 + /> -->
120 <view class="text-[#6B7280] text-[28rpx]">暂无搜索结果</view> 120 <view class="text-[#6B7280] text-[28rpx]">暂无搜索结果</view>
121 <view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">试试其他关键词吧</view> 121 <view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">试试其他关键词吧</view>
122 </view> 122 </view>
...@@ -406,7 +406,7 @@ watch(searchKeyword, (newVal) => { ...@@ -406,7 +406,7 @@ watch(searchKeyword, (newVal) => {
406 .filter-tabs-wrapper { 406 .filter-tabs-wrapper {
407 display: flex; 407 display: flex;
408 overflow-x: auto; 408 overflow-x: auto;
409 - padding: 0; 409 + padding: 24rpx 24rpx;
410 gap: 24rpx; 410 gap: 24rpx;
411 transition: all 0.3s ease; 411 transition: all 0.3s ease;
412 background-color: #F9FAFB; 412 background-color: #F9FAFB;
...@@ -432,7 +432,6 @@ watch(searchKeyword, (newVal) => { ...@@ -432,7 +432,6 @@ watch(searchKeyword, (newVal) => {
432 white-space: nowrap; 432 white-space: nowrap;
433 transition: all 0.3s ease; 433 transition: all 0.3s ease;
434 flex-shrink: 0; 434 flex-shrink: 0;
435 - height: 64rpx;
436 } 435 }
437 436
438 .filter-tab-active { 437 .filter-tab-active {
......