hookehuyr

fix: 修复搜索组件样式和搜索逻辑问题

- 移除计划书页面搜索栏的白色背景,使其与整体设计一致
- 为资料列表页面搜索栏添加底部边距,改善布局间距
- 优化搜索组件样式:移除边框、设置透明背景、调整圆角大小
- 修复搜索页面逻辑:空关键词时返回空数组,避免显示全部数据
...@@ -8,11 +8,13 @@ ...@@ -8,11 +8,13 @@
8 :disabled="disabled" 8 :disabled="disabled"
9 confirm-type="search" 9 confirm-type="search"
10 :clearable="showClear" 10 :clearable="showClear"
11 + :border="false"
11 class="search-input" 12 class="search-input"
12 @clear="handleClear" 13 @clear="handleClear"
13 @blur="handleBlur" 14 @blur="handleBlur"
14 @focus="handleFocus" 15 @focus="handleFocus"
15 @confirm="handleSearch" 16 @confirm="handleSearch"
17 + style="background: transparent;"
16 > 18 >
17 <template #left> 19 <template #left>
18 <IconFont 20 <IconFont
...@@ -230,11 +232,13 @@ function handleClear() { ...@@ -230,11 +232,13 @@ function handleClear() {
230 } 232 }
231 </script> 233 </script>
232 234
233 -<style lang="less" scoped> 235 +<style lang="less">
234 .search-bar { 236 .search-bar {
235 padding: 0; 237 padding: 0;
236 background: white; 238 background: white;
237 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 239 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
240 + border-radius: 44rpx;
241 + border: 1px solid #e5e7eb;
238 242
239 :deep(.nut-input) { 243 :deep(.nut-input) {
240 padding: 24rpx 32rpx; 244 padding: 24rpx 32rpx;
...@@ -242,10 +246,11 @@ function handleClear() { ...@@ -242,10 +246,11 @@ function handleClear() {
242 } 246 }
243 247
244 &.search-bar-rounded { 248 &.search-bar-rounded {
245 - border-radius: 9999rpx; 249 + border-radius: 44rpx;
250 + overflow: hidden;
246 251
247 :deep(.nut-input) { 252 :deep(.nut-input) {
248 - border-radius: 9999rpx; 253 + border-radius: 44rpx;
249 } 254 }
250 } 255 }
251 256
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <view class="bg-[#F9FAFB] z-10"> 7 <view class="bg-[#F9FAFB] z-10">
8 <NavHeader :title="pageTitle" /> 8 <NavHeader :title="pageTitle" />
9 9
10 - <view class="px-[32rpx] mt-[32rpx]"> 10 + <view class="px-[32rpx] mt-[32rpx] mb-[24rpx]">
11 <SearchBar 11 <SearchBar
12 v-model="searchValue" 12 v-model="searchValue"
13 placeholder="搜索资料..." 13 placeholder="搜索资料..."
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <NavHeader title="我的计划书" /> 9 <NavHeader title="我的计划书" />
10 10
11 <!-- Search Bar --> 11 <!-- Search Bar -->
12 - <view class="bg-white px-[24rpx] py-[16rpx]"> 12 + <view class="px-[24rpx] py-[16rpx]">
13 <SearchBar 13 <SearchBar
14 v-model="searchValue" 14 v-model="searchValue"
15 placeholder="搜索计划书名称、客户姓名..." 15 placeholder="搜索计划书名称、客户姓名..."
......
...@@ -268,6 +268,12 @@ const initTabsData = () => { ...@@ -268,6 +268,12 @@ const initTabsData = () => {
268 const searchResults = computed(() => { 268 const searchResults = computed(() => {
269 if (!hasSearched.value) return [] 269 if (!hasSearched.value) return []
270 270
271 + // ✅ 如果没有关键词,返回空数组(不显示全部数据)
272 + if (!searchKeyword.value.trim()) {
273 + console.log('[Search Results] 没有关键词,返回空数组')
274 + return []
275 + }
276 +
271 // 找到当前选中的 tab 277 // 找到当前选中的 tab
272 const currentTab = tabsData.value.find(tab => tab.id === activeTabId.value) 278 const currentTab = tabsData.value.find(tab => tab.id === activeTabId.value)
273 console.log('[Search Results] activeTabId:', activeTabId.value) 279 console.log('[Search Results] activeTabId:', activeTabId.value)
...@@ -279,17 +285,15 @@ const searchResults = computed(() => { ...@@ -279,17 +285,15 @@ const searchResults = computed(() => {
279 let results = currentTab.list 285 let results = currentTab.list
280 286
281 // Filter by keyword 287 // Filter by keyword
282 - if (searchKeyword.value.trim()) { 288 + const keyword = searchKeyword.value.toLowerCase()
283 - const keyword = searchKeyword.value.toLowerCase() 289 + console.log('[Search Results] 搜索关键词:', keyword)
284 - console.log('[Search Results] 搜索关键词:', keyword) 290 + console.log('[Search Results] 过滤前数量:', results.length)
285 - console.log('[Search Results] 过滤前数量:', results.length)
286 291
287 - results = results.filter(item => 292 + results = results.filter(item =>
288 - item.title.toLowerCase().includes(keyword) 293 + item.title.toLowerCase().includes(keyword)
289 - ) 294 + )
290 295
291 - console.log('[Search Results] 过滤后数量:', results.length) 296 + console.log('[Search Results] 过滤后数量:', results.length)
292 - }
293 297
294 return results 298 return results
295 }) 299 })
......