hanye-website/composables/useSearch.ts

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<SearchResult[]>([]);
  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'
  }
];