Claude Code 的应用场景

用户：我需要开发一个在线电商平台，支持用户注册、商品管理、订单处理和支付功能。

Claude Code：

1. 需求分析：
   - 用户系统：注册、登录、个人信息管理
   - 商品系统：商品发布、分类、搜索、详情展示
   - 订单系统：购物车、订单创建、订单管理、物流跟踪
   - 支付系统：多种支付方式集成、支付状态管理
   - 管理后台：商品管理、订单管理、用户管理、数据分析

2. 技术选型建议：
   - 前端：React + TypeScript + Next.js
   - 后端：Node.js + Express + MongoDB
   - 支付：集成 Stripe 或 PayPal API
   - 认证：JWT + OAuth2.0

3. 架构设计：
   - 微服务架构，将用户、商品、订单、支付拆分为独立服务
   - 使用 API Gateway 统一管理接口
   - 采用事件驱动架构处理异步任务
   - 实现 CI/CD 流水线自动化部署

4. 实现计划：
   - 第 1 周：搭建基础架构，实现用户系统
   - 第 2 周：实现商品系统和搜索功能
   - 第 3 周：实现订单系统和购物车
   - 第 4 周：集成支付系统
   - 第 5 周：开发管理后台
   - 第 6 周：测试和优化

用户：请帮我实现一个 React 组件，用于展示商品列表，支持分页、排序和筛选功能。

Claude Code：
1. 分析需求：
   - 商品列表展示
   - 分页功能
   - 排序功能（按价格、销量、上架时间）
   - 筛选功能（按分类、价格范围、品牌）

2. 生成组件代码：

import React, { useEffect, useState } from 'react';
import { Pagination, Select, Input } from 'antd';
import { Product } from '../types';

const { Option } = Select;
const { Search } = Input;

interface ProductListProps {
  initialProducts?: Product[];
  onProductClick?: (product: Product) => void;
}

const ProductList: React.FC<ProductListProps> = ({
  initialProducts = [],
  onProductClick,
}) => {
  const [products] = useState<Product[]>(initialProducts);
  const [filteredProducts, setFilteredProducts] = useState<Product[]>(
    initialProducts,
  );
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [sortBy, setSortBy] = useState('createdAt');
  const [sortOrder, setSortOrder] = useState('desc');
  const [filters, setFilters] = useState({
    category: '',
    minPrice: 0,
    maxPrice: Infinity,
    brand: '',
    search: '',
  });

  useEffect(() => {
    let result = [...products];

    if (filters.category) {
      result = result.filter((product) => product.category === filters.category);
    }

    if (filters.brand) {
      result = result.filter((product) => product.brand === filters.brand);
    }

    result = result.filter(
      (product) =>
        product.price >= filters.minPrice && product.price <= filters.maxPrice,
    );

    if (filters.search) {
      const searchLower = filters.search.toLowerCase();
      result = result.filter(
        (product) =>
          product.name.toLowerCase().includes(searchLower) ||
          product.description.toLowerCase().includes(searchLower),
      );
    }

    result.sort((a, b) => {
      const aValue = a[sortBy as keyof Product];
      const bValue = b[sortBy as keyof Product];

      if (aValue < bValue) return sortOrder === 'asc' ? -1 : 1;
      if (aValue > bValue) return sortOrder === 'asc' ? 1 : -1;
      return 0;
    });

    setFilteredProducts(result);
    setCurrentPage(1);
  }, [products, filters, sortBy, sortOrder]);

  const indexOfLastProduct = currentPage * pageSize;
  const indexOfFirstProduct = indexOfLastProduct - pageSize;
  const currentProducts = filteredProducts.slice(
    indexOfFirstProduct,
    indexOfLastProduct,
  );

  const handleFilterChange = (key: string, value: string | number) => {
    setFilters((prev) => ({
      ...prev,
      [key]: value,
    }));
  };

  const categories = [...new Set(products.map((product) => product.category))];
  const brands = [...new Set(products.map((product) => product.brand))];

  return (
    <div className="product-list">
      <div className="filter-section">
        <div className="filter-row">
          <Search
            placeholder="Search products"
            onChange={(event) => handleFilterChange('search', event.target.value)}
            style={{ width: 200, marginRight: 16 }}
          />
          <Select
            placeholder="Category"
            style={{ width: 150, marginRight: 16 }}
            onChange={(value) => handleFilterChange('category', value)}
          >
            <Option value="">All Categories</Option>
            {categories.map((category) => (
              <Option key={category} value={category}>
                {category}
              </Option>
            ))}
          </Select>
          <Select
            placeholder="Brand"
            style={{ width: 150, marginRight: 16 }}
            onChange={(value) => handleFilterChange('brand', value)}
          >
            <Option value="">All Brands</Option>
            {brands.map((brand) => (
              <Option key={brand} value={brand}>
                {brand}
              </Option>
            ))}
          </Select>
          <Input
            placeholder="Min Price"
            type="number"
            style={{ width: 100, marginRight: 8 }}
            onChange={(event) =>
              handleFilterChange('minPrice', Number(event.target.value) || 0)
            }
          />
          <span style={{ marginRight: 8 }}>-</span>
          <Input
            placeholder="Max Price"
            type="number"
            style={{ width: 100, marginRight: 16 }}
            onChange={(event) =>
              handleFilterChange('maxPrice', Number(event.target.value) || Infinity)
            }
          />
        </div>

        <div className="sort-section" style={{ marginTop: 16 }}>
          <span style={{ marginRight: 8 }}>Sort by:</span>
          <Select
            style={{ width: 150, marginRight: 16 }}
            value={sortBy}
            onChange={setSortBy}
          >
            <Option value="createdAt">Created At</Option>
            <Option value="price">Price</Option>
            <Option value="sales">Sales</Option>
          </Select>
          <Select style={{ width: 100 }} value={sortOrder} onChange={setSortOrder}>
            <Option value="asc">Ascending</Option>
            <Option value="desc">Descending</Option>
          </Select>
        </div>
      </div>

      <div
        className="product-grid"
        style={{
          marginTop: 24,
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
          gap: 16,
        }}
      >
        {currentProducts.map((product) => (
          <div
            key={product.id}
            className="product-card"
            style={{
              border: '1px solid #e8e8e8',
              borderRadius: 4,
              padding: 16,
              cursor: 'pointer',
            }}
            onClick={() => onProductClick?.(product)}
          >
            <img
              src={product.imageUrl}
              alt={product.name}
              style={{
                width: '100%',
                height: 200,
                objectFit: 'cover',
                marginBottom: 12,
              }}
            />
            <h3 style={{ margin: '0 0 8px 0', fontSize: 16 }}>{product.name}</h3>
            <p
              style={{
                margin: '0 0 12px 0',
                fontSize: 14,
                color: '#666',
                height: 48,
                overflow: 'hidden',
              }}
            >
              {product.description}
            </p>
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              <span style={{ fontSize: 18, fontWeight: 'bold', color: '#ff4d4f' }}>
                ${product.price.toFixed(2)}
              </span>
              <span style={{ fontSize: 12, color: '#999' }}>
                Sales: {product.sales}
              </span>
            </div>
          </div>
        ))}
      </div>

      <div className="pagination" style={{ marginTop: 24, textAlign: 'center' }}>
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          total={filteredProducts.length}
          onChange={setCurrentPage}
          pageSizeOptions={['10', '20', '50', '100']}
          showSizeChanger
          onShowSizeChange={(_, size) => setPageSize(size)}
        />
      </div>
    </div>
  );
};

export default ProductList;

用户：请帮我重构这段代码，提高其性能和可维护性：

function calculateTotalPrice(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    if (items[i].price && items[i].quantity) {
      total += items[i].price * items[i].quantity;
    }
  }
  return total;
}

function calculateDiscount(total, discountPercent) {
  if (discountPercent > 0 && discountPercent <= 100) {
    return total * (1 - discountPercent / 100);
  }
  return total;
}

function calculateTax(amount, taxRate) {
  if (taxRate > 0 && taxRate <= 100) {
    return amount * (taxRate / 100);
  }
  return 0;
}

function calculateFinalPrice(items, discountPercent, taxRate) {
  const subtotal = calculateTotalPrice(items);
  const discounted = calculateDiscount(subtotal, discountPercent);
  const tax = calculateTax(discounted, taxRate);
  return discounted + tax;
}

class PriceCalculator {
  static calculateSubtotal(items) {
    if (!Array.isArray(items)) {
      throw new Error('Items must be an array');
    }

    return items.reduce((total, item) => {
      const price = typeof item.price === 'number' && item.price > 0 ? item.price : 0;
      const quantity =
        typeof item.quantity === 'number' && item.quantity > 0 ? item.quantity : 0;

      return total + price * quantity;
    }, 0);
  }

  static applyDiscount(amount, discountPercent) {
    if (typeof amount !== 'number' || amount < 0) {
      throw new Error('Amount must be a non-negative number');
    }

    if (typeof discountPercent !== 'number') {
      throw new Error('Discount percent must be a number');
    }

    const validDiscount = Math.max(0, Math.min(100, discountPercent));
    return amount * (1 - validDiscount / 100);
  }

  static calculateTax(amount, taxRate) {
    if (typeof amount !== 'number' || amount < 0) {
      throw new Error('Amount must be a non-negative number');
    }

    if (typeof taxRate !== 'number') {
      throw new Error('Tax rate must be a number');
    }

    const validTaxRate = Math.max(0, Math.min(100, taxRate));
    return amount * (validTaxRate / 100);
  }

  static calculateFinalPrice(items, discountPercent = 0, taxRate = 0) {
    const subtotal = this.calculateSubtotal(items);
    const discountedAmount = this.applyDiscount(subtotal, discountPercent);
    const tax = this.calculateTax(discountedAmount, taxRate);
    const finalPrice = discountedAmount + tax;

    return {
      subtotal: Number(subtotal.toFixed(2)),
      discount: Number((subtotal - discountedAmount).toFixed(2)),
      tax: Number(tax.toFixed(2)),
      finalPrice: Number(finalPrice.toFixed(2)),
    };
  }
}

const items = [
  { price: 19.99, quantity: 2 },
  { price: 9.99, quantity: 1 },
  { price: 29.99, quantity: 3 },
];

try {
  const result = PriceCalculator.calculateFinalPrice(items, 10, 8.25);
  console.log('Price breakdown:', result);
} catch (error) {
  console.error('Error calculating price:', error.message);
}

用户：请帮我为刚才重构的 PriceCalculator 类生成单元测试用例。

Claude Code：
1. 测试策略：正常情况、边界情况、异常情况、组合情况
2. 生成的测试用例（Jest）：

const PriceCalculator = require('./PriceCalculator');

describe('PriceCalculator', () => {
  describe('calculateSubtotal', () => {
    test('should return 0 for empty array', () => {
      expect(PriceCalculator.calculateSubtotal([])).toBe(0);
    });

    test('should return 0 for array with invalid items', () => {
      expect(
        PriceCalculator.calculateSubtotal([{ price: 'invalid', quantity: 'invalid' }]),
      ).toBe(0);
    });

    test('should calculate correct subtotal for valid items', () => {
      const items = [
        { price: 10, quantity: 2 },
        { price: 20, quantity: 3 },
      ];
      expect(PriceCalculator.calculateSubtotal(items)).toBe(80);
    });

    test('should handle items with zero price or quantity', () => {
      const items = [
        { price: 10, quantity: 0 },
        { price: 0, quantity: 5 },
        { price: 20, quantity: 2 },
      ];
      expect(PriceCalculator.calculateSubtotal(items)).toBe(40);
    });

    test('should throw error for non-array input', () => {
      expect(() => PriceCalculator.calculateSubtotal('invalid')).toThrow(
        'Items must be an array',
      );
    });
  });

  describe('applyDiscount', () => {
    test('should return original amount for 0% discount', () => {
      expect(PriceCalculator.applyDiscount(100, 0)).toBe(100);
    });

    test('should return 0 for 100% discount', () => {
      expect(PriceCalculator.applyDiscount(100, 100)).toBe(0);
    });

    test('should calculate correct discount for valid percentage', () => {
      expect(PriceCalculator.applyDiscount(100, 20)).toBe(80);
    });

    test('should cap discount at 100%', () => {
      expect(PriceCalculator.applyDiscount(100, 150)).toBe(0);
    });

    test('should floor discount at 0%', () => {
      expect(PriceCalculator.applyDiscount(100, -50)).toBe(100);
    });

    test('should throw error for negative amount', () => {
      expect(() => PriceCalculator.applyDiscount(-100, 20)).toThrow(
        'Amount must be a non-negative number',
      );
    });

    test('should throw error for non-number discount', () => {
      expect(() => PriceCalculator.applyDiscount(100, 'invalid')).toThrow(
        'Discount percent must be a number',
      );
    });
  });

  describe('calculateTax', () => {
    test('should return 0 for 0% tax rate', () => {
      expect(PriceCalculator.calculateTax(100, 0)).toBe(0);
    });

    test('should calculate correct tax for valid rate', () => {
      expect(PriceCalculator.calculateTax(100, 8.25)).toBe(8.25);
    });

    test('should cap tax rate at 100%', () => {
      expect(PriceCalculator.calculateTax(100, 150)).toBe(100);
    });

    test('should floor tax rate at 0%', () => {
      expect(PriceCalculator.calculateTax(100, -50)).toBe(0);
    });

    test('should throw error for negative amount', () => {
      expect(() => PriceCalculator.calculateTax(-100, 8.25)).toThrow(
        'Amount must be a non-negative number',
      );
    });

    test('should throw error for non-number tax rate', () => {
      expect(() => PriceCalculator.calculateTax(100, 'invalid')).toThrow(
        'Tax rate must be a number',
      );
    });
  });

  describe('calculateFinalPrice', () => {
    test('should return correct price breakdown for valid input', () => {
      const items = [
        { price: 19.99, quantity: 2 },
        { price: 9.99, quantity: 1 },
      ];
      const result = PriceCalculator.calculateFinalPrice(items, 10, 8.25);

      expect(result).toEqual({
        subtotal: 49.97,
        discount: 4.997,
        tax: 3.648,
        finalPrice: 48.621,
      });
    });

    test('should use default values when discount and tax rate are not provided', () => {
      const items = [{ price: 100, quantity: 1 }];
      const result = PriceCalculator.calculateFinalPrice(items);

      expect(result).toEqual({
        subtotal: 100,
        discount: 0,
        tax: 0,
        finalPrice: 100,
      });
    });

    test('should handle empty items array', () => {
      const result = PriceCalculator.calculateFinalPrice([], 10, 8.25);

      expect(result).toEqual({
        subtotal: 0,
        discount: 0,
        tax: 0,
        finalPrice: 0,
      });
    });

    test('should throw error for invalid items', () => {
      expect(() => PriceCalculator.calculateFinalPrice('invalid', 10, 8.25)).toThrow(
        'Items must be an array',
      );
    });
  });
});

用户：我有一个包含销售数据的 CSV 文件，请帮我分析销售趋势并生成可视化报告。

Claude Code：
1. 分析需求：读取 CSV、趋势分析、可视化、输出报告
2. 实现代码：

import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns

# 读取数据
df = pd.read_csv('sales_data.csv')

# 数据清洗
df['date'] = pd.to_datetime(df['date'])
df['year'] = df['date'].dt.year
df['month'] = df['date'].dt.month
df['quarter'] = df['date'].dt.quarter

def analyze_sales_trends(dataframe):
  monthly_sales = (
    dataframe.groupby(['year', 'month'])['revenue'].sum().reset_index()
  )
  monthly_sales['date'] = pd.to_datetime(
    monthly_sales['year'].astype(str)
    + '-'
    + monthly_sales['month'].astype(str)
    + '-01'
  )

  regional_sales = dataframe.groupby('region')['revenue'].sum().sort_values(
    ascending=False,
  )
  category_sales = dataframe.groupby('category')['revenue'].sum().sort_values(
    ascending=False,
  )

  return monthly_sales, regional_sales, category_sales


def create_visualizations(dataframe, monthly_sales, regional_sales, category_sales):
  fig, axes = plt.subplots(2, 2, figsize=(15, 12))

  axes[0, 0].plot(monthly_sales['date'], monthly_sales['revenue'], marker='o')
  axes[0, 0].set_title('Monthly Sales Trend')
  axes[0, 0].set_xlabel('Date')
  axes[0, 0].set_ylabel('Revenue')
  axes[0, 0].grid(True)
  axes[0, 0].tick_params(axis='x', rotation=45)

  regional_sales.plot(kind='bar', ax=axes[0, 1], color='skyblue')
  axes[0, 1].set_title('Sales by Region')
  axes[0, 1].set_xlabel('Region')
  axes[0, 1].set_ylabel('Revenue')
  axes[0, 1].tick_params(axis='x', rotation=45)

  category_sales.plot(kind='bar', ax=axes[1, 0], color='lightcoral')
  axes[1, 0].set_title('Sales by Category')
  axes[1, 0].set_xlabel('Category')
  axes[1, 0].set_ylabel('Revenue')
  axes[1, 0].tick_params(axis='x', rotation=45)

  pivot_table = dataframe.pivot_table(
    values='revenue',
    index='quarter',
    columns='region',
    aggfunc='sum',
  )
  sns.heatmap(pivot_table, annot=True, fmt='.0f', cmap='YlOrRd', ax=axes[1, 1])
  axes[1, 1].set_title('Sales Heatmap (Quarter vs Region)')

  plt.tight_layout()
  plt.savefig('sales_analysis_report.png', dpi=300, bbox_inches='tight')
  plt.show()


monthly_sales, regional_sales, category_sales = analyze_sales_trends(df)
create_visualizations(df, monthly_sales, regional_sales, category_sales)

def generate_report(dataframe, regional_sales, category_sales):
  report = f"""
  销售数据分析报告
  =================

  数据概览：
  - 总销售额: ${dataframe['revenue'].sum():,.2f}
  - 总订单数: {len(dataframe):,}
  - 平均订单金额: ${dataframe['revenue'].mean():,.2f}
  - 数据时间范围: {dataframe['date'].min()} 至 {dataframe['date'].max()}

  地区销售排名：
  """

  for i, (region, revenue) in enumerate(regional_sales.items(), 1):
    report += f"{i}. {region}: ${revenue:,.2f}\n"

  report += "\n产品类别销售排名：\n"
  for i, (category, revenue) in enumerate(category_sales.items(), 1):
    report += f"{i}. {category}: ${revenue:,.2f}\n"

  return report


report = generate_report(df, regional_sales, category_sales)
print(report)

with open('sales_analysis_report.txt', 'w', encoding='utf-8') as file:
  file.write(report)

# PriceCalculator API 文档

## 概述
PriceCalculator 是一个用于计算商品价格的工具类，支持商品总价计算、折扣应用、税费计算和最终价格计算。

## 方法

### calculateSubtotal(items)
计算商品列表的总价。

**参数：**
- `items` (Array<{price: number, quantity: number}>): 商品列表

**返回值：**
- `number`: 商品总价

**异常：**
- `Error`: 当输入不是数组时抛出

**示例：**
```javascript
const items = [
  { price: 19.99, quantity: 2 },
  { price: 9.99, quantity: 1 },
];
const subtotal = PriceCalculator.calculateSubtotal(items);

## 学习与教学场景

Claude Code 可以用于代码解释、概念讲解、练习生成与学习路径规划。

使用案例：

```text
用户：请帮我解释一下 React 中的 useEffect 是如何工作的。

useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数（可选）
  };
}, [依赖项数组]);