hookehuyr

feat: 知识库页面新增搜索功能

新增功能:
- 添加 SearchBar 搜索组件
- 实现实时搜索功能(带 500ms 防抖优化)
- 支持按回车键立即搜索
- 支持一键清空搜索内容
- 搜索与分类筛选联动(可组合使用)

优化体验:
- 输入时实时搜索(防抖延迟 500ms)
- 按回车键立即搜索(取消防抖定时器)
- 清空搜索时恢复当前分类的所有产品
- 切换分类时保持搜索状态

技术实现:
- API 接口:使用 listAPI 的 keyword 参数
- 防抖逻辑:使用 setTimeout 实现搜索防抖
- 状态管理:新增 searchValue 搜索状态
- 样式布局:参考 plan 页面的搜索栏布局

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -27,7 +27,7 @@ declare module 'vue' {
OfficeViewer: typeof import('./src/components/OfficeViewer.vue')['default']
PdfPreview: typeof import('./src/components/PdfPreview.vue')['default']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PlanPopup: typeof import('./src/components/PlanPopup/index.vue')['default']
PlanPopup: typeof import('./src/components/PlanSchemes/PlanPopup.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
QrCode: typeof import('./src/components/qrCode.vue')['default']
QrCodeSearch: typeof import('./src/components/qrCodeSearch.vue')['default']
......
......@@ -5,6 +5,31 @@
---
## [2026-02-04] - 知识库页面新增搜索功能
### 新增
- 知识库页面(`src/pages/knowledge-base/index.vue`
- 添加 SearchBar 搜索组件
- 实现实时搜索功能(带 500ms 防抖优化)
- 支持按回车键立即搜索
- 支持一键清空搜索内容
- 搜索与分类筛选联动(可组合使用)
### 优化
- 搜索体验优化
- 输入时实时搜索(防抖延迟 500ms)
- 按回车键立即搜索(取消防抖定时器)
- 清空搜索时恢复当前分类的所有产品
- 切换分类时保持搜索状态
### 技术实现
- API 接口:使用 `listAPI``keyword` 参数
- 防抖逻辑:使用 `setTimeout` 实现搜索防抖
- 状态管理:新增 `searchValue` 搜索状态
- 样式布局:参考 plan 页面的搜索栏布局
---
## [2026-02-04] - 清理 Apifox 依赖并优化工具链
### 移除
......
......@@ -70,6 +70,12 @@ paths:
required: false
schema:
type: string
- name: keyword
in: query
description: 搜索
required: false
schema:
type: string
responses:
'200':
description: ''
......@@ -257,7 +263,7 @@ paths:
x-apifox-ordering: 0
security: []
x-apifox-folder: 产品
x-apifox-status: done
x-apifox-status: released
x-run-in-apifox: https://app.apifox.com/web/project/7792797/apis/api-414404531-run
components:
schemas: {}
......
......@@ -56,6 +56,7 @@ export const detailAPI = (params) => fn(fetch.get(Api.Detail, params));
* @param {string} params.page (可选)
* @param {string} params.cid (可选) 分类id
* @param {string} params.recommend (可选) 推荐位: normal-普通, hot-热卖
* @param {string} params.keyword (可选) 搜索
* @returns {Promise<{
* code: number; // 状态码
* msg: string; // 消息
......
<!--
* @Date: 2026-01-31
* @Description: 产品知识库 - API 接口集成版本
* @Description: 产品知识库 - API 接口集成版本(含搜索功能)
-->
<template>
<view class="h-screen bg-[#F9FAFB] flex flex-col">
<view class="bg-[#F9FAFB] z-10">
<NavHeader title="产品知识库" />
<!-- Search Bar -->
<view class="px-[24rpx] py-[16rpx] bg-white">
<SearchBar
v-model="searchValue"
placeholder="搜索产品名称..."
:show-clear="true"
@search="onSearch"
@input="onSearchInput"
@clear="onClear"
/>
</view>
<!-- Tabs Container -->
<view class="flex-1 min-h-0 flex flex-col">
<view class="bg-white mt-[2rpx]">
<nut-tabs v-model="activeTabId">
<!-- 自定义标签栏 -->
<template #titles>
......@@ -105,11 +117,17 @@
import { ref, computed } from 'vue'
import Taro, { useLoad, useReachBottom } from '@tarojs/taro'
import NavHeader from '@/components/NavHeader.vue'
import SearchBar from '@/components/SearchBar.vue'
import { useListItemClick, ListType } from '@/composables/useListItemClick'
import { listAPI } from '@/api/get_product'
const activeTabId = ref('')
// 搜索状态
const searchValue = ref('')
// 搜索防抖定时器
let searchTimer = null
// 分页状态
const page = ref(0)
const limit = ref(10)
......@@ -136,7 +154,7 @@ const tabsData = computed(() => {
/**
* 获取产品列表
* @description 根据 activeTabId 获取对应分类的产品列表
* @description 根据 activeTabId 和 searchValue 获取对应分类的产品列表
*/
const fetchProducts = async (isLoadMore = false) => {
if (loading.value) return
......@@ -154,6 +172,11 @@ const fetchProducts = async (isLoadMore = false) => {
params.cid = activeTabId.value
}
// 添加搜索关键词参数
if (searchValue.value) {
params.keyword = searchValue.value
}
const res = await listAPI(params)
if (res.code === 1 && res.data) {
......@@ -205,6 +228,76 @@ const onTabClick = (id) => {
products.value = []
hasMore.value = true
// 重新加载数据(保持搜索状态)
fetchProducts(false)
}
/**
* 搜索输入处理(带防抖)
* @description 用户输入时实时搜索,使用防抖优化性能
* @param {string} value - 搜索关键词
*/
const onSearchInput = (value) => {
console.log('搜索输入:', value)
// 清除之前的定时器
if (searchTimer) {
clearTimeout(searchTimer)
}
// 设置新的定时器(500ms 后执行搜索)
searchTimer = setTimeout(() => {
// 重置分页状态
page.value = 0
products.value = []
hasMore.value = true
// 重新加载数据
fetchProducts(false)
}, 500)
}
/**
* 搜索处理(回车键)
* @description 用户按下回车或点击搜索按钮时触发
* @param {string} value - 搜索关键词
*/
const onSearch = (value) => {
console.log('搜索产品:', value)
// 清除防抖定时器
if (searchTimer) {
clearTimeout(searchTimer)
searchTimer = null
}
// 重置分页状态
page.value = 0
products.value = []
hasMore.value = true
// 重新加载数据
fetchProducts(false)
}
/**
* 清空搜索
* @description 用户点击清除按钮时触发
*/
const onClear = () => {
console.log('清空搜索')
// 清除防抖定时器
if (searchTimer) {
clearTimeout(searchTimer)
searchTimer = null
}
// 重置分页状态
page.value = 0
products.value = []
hasMore.value = true
// 重新加载数据
fetchProducts(false)
}
......