重构商品搜索模块：AI CLI 如何将数小时工作压缩至分钟级

$ claude "重构商品搜索功能，前端使用React+TypeScript实现严格类型检查，后端使用Node.js+Express添加Jest单元测试。搜索需要支持关键字、价格范围、商品分类多条件筛选，返回分页结果。前后端都需要添加完整的错误处理。"

// src/components/ProductSearch.js (原始版本)
import React, { useState } from 'react';

function ProductSearch() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleSearch = async (keyword) => {
    setLoading(true);
    try {
      const response = await fetch(`/api/products/search?q=${keyword}`);
      const data = await response.json();
      setProducts(data);
    } catch (error) {
      console.error('Search error:', error);
    }
    setLoading(false);
  };

  return (
    <div>
      <input 
        type="text" 
        placeholder="搜索商品..." 
        onChange={(e) => handleSearch(e.target.value)}
      />
      {loading ? <p>加载中...</p> : (
        <div>
          {products.map(product => (
            <div key={product.id}>
              <h3>{product.name}</h3>
              <p>价格: {product.price}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// src/components/ProductSearch.tsx (AI 重构版本)
import React, { useState, useCallback } from 'react';
import { searchProducts, SearchParams, Product, PaginatedResponse } from '../api/productApi';

const ProductSearch: React.FC = () => {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [pagination, setPagination] = useState({ page: 1, totalPages: 1 });

  const handleSearch = useCallback(async (params: SearchParams) => {
    setLoading(true);
    setError(null);
    
    try {
      const response: PaginatedResponse<Product> = await searchProducts(params);
      setProducts(response.data);
      setPagination({
        page: response.page,
        totalPages: response.totalPages
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : '搜索失败');
    } finally {
      setLoading(false);
    }
  }, []);

  return (
    <div className="product-search">
      <SearchFilters onSubmit={handleSearch} />
      {error && <div className="error-message">{error}</div>}
      {loading ? (
        <div className="loading-spinner">加载中...</div>
      ) : (
        <>
          <ProductList products={products} />
          <Pagination 
            currentPage={pagination.page}
            totalPages={pagination.totalPages}
            onPageChange={(page) => handleSearch({ page })}
          />
        </>
      )}
    </div>
  );
};

export default ProductSearch;

// src/api/productApi.ts
export interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  imageUrl: string;
  description: string;
}

export interface SearchParams {
  keyword?: string;
  minPrice?: number;
  maxPrice?: number;
  category?: string;
  page?: number;
  limit?: number;
}

export interface PaginatedResponse<T> {
  data: T[];
  page: number;
  total: number;
  totalPages: number;
}

export const searchProducts = async (
  params: SearchParams
): Promise<PaginatedResponse<Product>> => {
  const queryString = new URLSearchParams();
  Object.entries(params).forEach(([key, value]) => {
    if (value !== undefined && value !== '') {
      queryString.append(key, value.toString());
    }
  });

  const response = await fetch(`/api/products/search?${queryString}`);
  if (!response.ok) {
    throw new Error(`搜索失败: ${response.statusText}`);
  }
  return response.json();
};

// server/routes/products.js (原始版本)
app.get('/api/products/search', async (req, res) => {
  try {
    const { q } = req.query;
    const products = await Product.find({ 
      $or: [
        { name: { $regex: q, $options: 'i' } },
        { description: { $regex: q, $options: 'i' } }
      ]
    });
    res.json(products);
  } catch (error) {
    res.status(500).json({ error: '服务器错误' });
  }
});

// server/src/controllers/productController.ts
import { Request, Response } from 'express';
import { Product } from '../models/Product';
import { SearchQueryParams } from '../types/request';

export const searchProducts = async (
  req: Request<{}, {}, {}, SearchQueryParams>,
  res: Response
) => {
  try {
    const { keyword, minPrice, maxPrice, category, page = 1, limit = 10 } = req.query;

    const query: any = {};
    
    if (keyword) {
      query.$or = [
        { name: { $regex: keyword, $options: 'i' } },
        { description: { $regex: keyword, $options: 'i' } }
      ];
    }

    if (minPrice !== undefined || maxPrice !== undefined) {
      query.price = {};
      if (minPrice !== undefined) query.price.$gte = Number(minPrice);
      if (maxPrice !== undefined) query.price.$lte = Number(maxPrice);
    }

    if (category) {
      query.category = category;
    }

    const skip = (Number(page) - 1) * Number(limit);
    const [products, total] = await Promise.all([
      Product.find(query).skip(skip).limit(Number(limit)),
      Product.countDocuments(query)
    ]);

    res.json({
      data: products,
      page: Number(page),
      total,
      totalPages: Math.ceil(total / Number(limit))
    });
  } catch (error) {
    console.error('Search products error:', error);
    res.status(500).json({ 
      error: '搜索商品时发生错误',
      details: process.env.NODE_ENV === 'development' ? error.message : undefined
    });
  }
};

// server/src/__tests__/productController.test.ts
import request from 'supertest';
import express from 'express';
import { searchProducts } from '../controllers/productController';
import { Product } from '../models/Product';

jest.mock('../models/Product');

const app = express();
app.use(express.json());
app.get('/api/products/search', searchProducts);

describe('Product Controller', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  test('should search products by keyword', async () => {
    const mockProducts = [{ name: 'Test Product', price: 100 }];
    (Product.find as jest.Mock).mockResolvedValue(mockProducts);
    (Product.countDocuments as jest.Mock).mockResolvedValue(1);

    const response = await request(app)
      .get('/api/products/search')
      .query({ keyword: 'test' });

    expect(response.status).toBe(200);
    expect(response.body.data).toEqual(mockProducts);
  });

  test('should filter products by price range', async () => {
    // 测试价格范围过滤
  });

  test('should handle server errors', async () => {
    (Product.find as jest.Mock).mockRejectedValue(new Error('Database error'));

    const response = await request(app)
      .get('/api/products/search')
      .query({ keyword: 'test' });

    expect(response.status).toBe(500);
    expect(response.body.error).toBeDefined();
  });
});