import { ref, computed } from 'vue'; import { useErrorHandler } from './useErrorHandler'; /** * 搜索结果项接口 */ interface SearchResult { id: number; title: string; description: string; type: 'product' | 'faq' | 'page'; url: string; } /** * 全局搜索功能钩子 * @returns 搜索相关状态和方法 */ export function useSearch() { const searchQuery = ref(''); const searchResults = ref([]); const { error, isLoading, wrapAsync } = useErrorHandler(); /** * 根据查询条件过滤搜索结果 */ const filteredResults = computed(() => { if (!searchQuery.value.trim()) return []; // 简单的模拟搜索实现,实际项目中应替换为真实API return mockSearchResults.filter(item => item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) || item.description.toLowerCase().includes(searchQuery.value.toLowerCase()) ); }); /** * 执行搜索 * @param query - 搜索关键词 */ async function search(query: string) { searchQuery.value = query; // 在实际项目中,这里应该调用搜索API await wrapAsync(async () => { await new Promise(resolve => setTimeout(resolve, 300)); // 模拟API延迟 searchResults.value = filteredResults.value; return searchResults.value; }); } /** * 清空搜索 */ function clearSearch() { searchQuery.value = ''; searchResults.value = []; } return { searchQuery, searchResults: computed(() => searchResults.value), isLoading, error, search, clearSearch }; } // 模拟数据,实际项目中应替换为真实API数据 const mockSearchResults: SearchResult[] = [ { id: 1, title: '产品一', description: '这是产品一的详细描述', type: 'product', url: '/products/1' }, { id: 2, title: '产品二', description: '这是产品二的详细描述', type: 'product', url: '/products/2' }, { id: 3, title: '如何使用产品?', description: '详细介绍产品的使用方法', type: 'faq', url: '/faq/1' }, { id: 4, title: '关于我们', description: '公司简介和历史', type: 'page', url: '/about' } ];