hookehuyr

feat: 优化搜索页清空逻辑和分类引导文案

优化内容:
- 清空时重置到初始状态,不再显示"暂无搜索结果"
- 添加分类相关的动态引导文案(全部/产品/资料)
- 实时搜索监听器优化:清空关键词时也重置状态

影响文件:
- src/pages/search/index.vue
- docs/CHANGELOG.md

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -5,6 +5,31 @@
---
## [2026-02-03] - 优化搜索页清空逻辑和引导文案
### 优化
- 优化搜索页面的清空逻辑,清空时重置到初始状态(`src/pages/search/index.vue`
- 点击清空按钮后,`hasSearched` 状态重置为 `false`
- 不再显示"暂无搜索结果",而是回到初始状态引导用户
- 实时搜索监听器优化:清空关键词时也重置到初始状态
- 添加分类相关的动态引导文案,提升用户体验
- **全部**分类:显示"搜索培训资料、案例、产品"+"输入关键词开始搜索"
- **产品**分类:显示"搜索保险产品"+"输入产品名称或类型,如'重疾险'"
- **资料**分类:显示"搜索培训资料"+"输入资料关键词,如'销售话术'"
---
**详细信息**
- **影响文件**: `src/pages/search/index.vue`
- **技术栈**: Vue 3, Composition API, Computed
- **测试状态**: ✅ 已完成
- **备注**:
- 清空逻辑更符合用户预期,不会显示令人困惑的"暂无搜索结果"
- 分类相关的引导文案帮助用户明确可以搜索什么内容
- 使用 `computed` 属性 `initialStateText` 根据当前分类动态返回文案
---
## [2026-02-03] - 优化列表空状态显示
### 优化
......
......@@ -120,8 +120,8 @@
<!-- Initial State (从未搜索过) -->
<view v-else-if="isInitialState" class="flex flex-col items-center justify-center py-[120rpx]">
<IconFont name="search" class="text-gray-300 mb-[24rpx]" size="64" />
<view class="text-[#6B7280] text-[28rpx]">搜索培训资料、案例、产品</view>
<view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">输入关键词开始搜索</view>
<view class="text-[#6B7280] text-[28rpx]">{{ initialStateText.title }}</view>
<view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">{{ initialStateText.subtitle }}</view>
</view>
</view>
</view>
......@@ -159,6 +159,40 @@ const isInitialState = computed(() => {
})
/**
* 初始状态的文案内容
* @description 根据当前选中的分类显示不同的文案,提升用户体验
*/
const initialStateText = computed(() => {
const currentTab = tabsData.value.find(tab => tab.id === activeTabId.value)
if (!currentTab) {
return {
title: '搜索培训资料、案例、产品',
subtitle: '输入关键词开始搜索'
}
}
// 根据分类返回不同的文案
switch (currentTab.id) {
case 'product':
return {
title: '搜索保险产品',
subtitle: '输入产品名称或类型,如"重疾险"'
}
case 'material':
return {
title: '搜索培训资料',
subtitle: '输入资料关键词,如"销售话术"'
}
default:
return {
title: '搜索培训资料、案例、产品',
subtitle: '输入关键词开始搜索'
}
}
})
/**
* Tab 数据源
* @description 包含分类信息和对应的列表
*/
......@@ -333,16 +367,16 @@ const handleBlur = () => {
/**
* 清空搜索
* @description 清空搜索关键词,但保持 hasSearched 状态
* 以显示"暂无搜索结果"而不是"初始状态"
* @description 清空搜索关键词并重置到初始状态
* 让用户可以重新开始搜索,在不同分类下显示对应的引导文案
*/
const clearSearch = () => {
console.log('[Search Clear] 清空搜索关键词')
searchKeyword.value = ''
// ❌ 不要重置 hasSearched,保持"已搜索"状态
// hasSearched.value = false
hasSearched.value = false // ✅ 重置到初始状态
listRenderKey.value += 1
console.log('[Search Clear] hasSearched 保持为:', hasSearched.value)
console.log('[Search Clear] hasSearched 已重置为 false,显示初始状态')
console.log('[Search Clear] 当前分类:', activeTabId.value)
}
// Go to detail
......@@ -366,6 +400,7 @@ initTabsData()
/**
* 监听搜索关键词变化,实现实时搜索
* @description 当用户输入关键词时,自动触发搜索,并标记"已搜索"状态
* 当用户清空关键词时,重置到初始状态
*/
watch(searchKeyword, (newVal) => {
if (newVal.trim()) {
......@@ -375,9 +410,11 @@ watch(searchKeyword, (newVal) => {
console.log('[Search Watch] 当前分类:', activeTabId.value)
console.log('[Search Watch] 搜索结果数量:', searchResults.value.length)
console.log('[Search Watch] hasSearched 设置为 true')
} else {
// ✅ 清空关键词时,重置到初始状态
hasSearched.value = false
console.log('[Search Watch] 关键词已清空,重置到初始状态')
}
// ✅ 清空关键词时,不要重置 hasSearched
// 这样可以保持"已搜索"状态,显示"暂无搜索结果"而不是"初始状态"
})
</script>
......