本节将介绍如何使用 Tailwind CSS 开发一个现代化的电商网站，包括商品展示、购物车、结算流程等核心功能的实现。

商品列表

商品卡片组件

  1. // components/ProductCard.tsx
  2. interface ProductCardProps {
  3.   product: {
  4.     id: string;
  5.     title: string;
  6.     price: number;
  7.     image: string;
  8.     discount?: number;
  9.     tags?: string[];
  10.   };
  11.   onAddToCart: (productId: string) => void;
  12. }
  14. const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
  15.   return (
  16.     <div className="group relative">
  17.       {/* 商品图片 */}
  18.       <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200">
  19.         <img
  20.           src={product.image}
  21.           alt={product.title}
  22.           className="h-full w-full object-cover object-center group-hover:opacity-75 transition-opacity"
  23.         />
  24.         {product.discount && (
  25.           <div className="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded-md text-sm font-medium">
  26.             -{product.discount}%
  27.           </div>
  28.         )}
  29.       </div>
  31.       {/* 商品信息 */}
  32.       <div className="mt-4 flex justify-between">
  33.         <div>
  34.           <h3 className="text-sm text-gray-700">
  35.             <a href={`/product/${product.id}`}>
  36.               <span aria-hidden="true" className="absolute inset-0" />
  37.               {product.title}
  38.             </a>
  39.           </h3>
  40.           <div className="mt-1 flex items-center space-x-2">
  41.             <p className="text-lg font-medium text-gray-900">
  42.               ¥{product.price}
  43.             </p>
  44.             {product.discount && (
  45.               <p className="text-sm text-gray-500 line-through">
  46.                 ¥{(product.price * (100 + product.discount) / 100).toFixed(2)}
  47.               </p>
  48.             )}
  49.           </div>
  50.         </div>
  51.         <button
  52.           onClick={() => onAddToCart(product.id)}
  53.           className="inline-flex items-center p-2 rounded-full bg-blue-500 text-white shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
  54.         >
  55.           <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  56.             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
  57.           </svg>
  58.         </button>
  59.       </div>
  61.       {/* 商品标签 */}
  62.       {product.tags && product.tags.length > 0 && (
  63.         <div className="mt-2 flex flex-wrap gap-1">
  64.           {product.tags.map(tag => (
  65.             <span
  66.               key={tag}
  67.               className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800"
  68.             >
  69.               {tag}
  70.             </span>
  71.           ))}
  72.         </div>
  73.       )}
  74.     </div>
  75.   );
  76. };

商品列表页面

  1. // pages/ProductList.tsx
  2. import { useState } from 'react';
  3. import ProductCard from '../components/ProductCard';
  4. import { useCart } from '../hooks/useCart';
  6. const filters = [
  7.   { id: 'category', name: '分类', options: ['全部', '电子产品', '服装', '食品'] },
  8.   { id: 'price', name: '价格', options: ['全部', '0-100', '100-500', '500+'] },
  9.   // ... 更多筛选选项
  10. ];
  12. const ProductList = () => {
  13.   const [activeFilters, setActiveFilters] = useState<Record<string, string>>({});
  14.   const { addToCart } = useCart();
  16.   return (
  17.     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  18.       {/* 筛选器 */}
  19.       <div className="py-4 border-b border-gray-200">
  20.         <div className="flex flex-wrap gap-4">
  21.           {filters.map(filter => (
  22.             <div key={filter.id} className="relative">
  23.               <select
  24.                 className="appearance-none bg-white border border-gray-300 rounded-md py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
  25.                 value={activeFilters[filter.id] || ''}
  26.                 onChange={(e) => {
  27.                   setActiveFilters(prev => ({
  28.                     ...prev,
  29.                     [filter.id]: e.target.value
  30.                   }));
  31.                 }}
  32.               >
  33.                 <option value="">{filter.name}</option>
  34.                 {filter.options.map(option => (
  35.                   <option key={option} value={option}>
  36.                     {option}
  37.                   </option>
  38.                 ))}
  39.               </select>
  40.               <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
  41.                 <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
  42.                   <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
  43.                 </svg>
  44.               </div>
  45.             </div>
  46.           ))}
  47.         </div>
  48.       </div>
  50.       {/* 商品网格 */}
  51.       <div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4">
  52.         {products.map(product => (
  53.           <ProductCard
  54.             key={product.id}
  55.             product={product}
  56.             onAddToCart={addToCart}
  57.           />
  58.         ))}
  59.       </div>
  61.       {/* 分页 */}
  62.       <div className="mt-8 flex justify-center">
  63.         <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
  64.           <a
  65.             href="#"
  66.             className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
  67.           >
  68.             上一页
  69.           </a>
  70.           {/* 页码 */}
  71.           <a
  72.             href="#"
  73.             className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
  74.           >
  75.             1
  76.           </a>
  77.           <a
  78.             href="#"
  79.             className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
  80.           >
  81.             下一页
  82.           </a>
  83.         </nav>
  84.       </div>
  85.     </div>
  86.   );
  87. };

购物车功能

购物车 Hook

  1. // hooks/useCart.ts
  2. import { useState, useCallback } from 'react';
  4. interface CartItem {
  5.   id: string;
  6.   quantity: number;
  7.   price: number;
  8.   title: string;
  9.   image: string;
  10. }
  12. export const useCart = () => {
  13.   const [items, setItems] = useState<CartItem[]>([]);
  15.   const addToCart = useCallback((product: Omit<CartItem, 'quantity'>) => {
  16.     setItems(prev => {
  17.       const existingItem = prev.find(item => item.id === product.id);
  19.       if (existingItem) {
  20.         return prev.map(item =>
  21.           item.id === product.id
  22.             ? { ...item, quantity: item.quantity + 1 }
  23.             : item
  24.         );
  25.       }
  27.       return [...prev, { ...product, quantity: 1 }];
  28.     });
  29.   }, []);
  31.   const removeFromCart = useCallback((productId: string) => {
  32.     setItems(prev => prev.filter(item => item.id !== productId));
  33.   }, []);
  35.   const updateQuantity = useCallback((productId: string, quantity: number) => {
  36.     setItems(prev =>
  37.       prev.map(item =>
  38.         item.id === productId
  39.           ? { ...item, quantity: Math.max(0, quantity) }
  40.           : item
  41.       ).filter(item => item.quantity > 0)
  42.     );
  43.   }, []);
  45.   const total = items.reduce(
  46.     (sum, item) => sum + item.price * item.quantity,
  47.     0
  48.   );
  50.   return {
  51.     items,
  52.     addToCart,
  53.     removeFromCart,
  54.     updateQuantity,
  55.     total
  56.   };
  57. };

购物车组件

  1. // components/Cart.tsx
  2. import { useCart } from '../hooks/useCart';
  4. const Cart = () => {
  5.   const { items, removeFromCart, updateQuantity, total } = useCart();
  7.   return (
  8.     <div className="fixed inset-y-0 right-0 w-96 bg-white shadow-xl">
  9.       <div className="flex flex-col h-full">
  10.         {/* 购物车头部 */}
  11.         <div className="px-4 py-6 bg-gray-50">
  12.           <h2 className="text-lg font-medium text-gray-900">购物车</h2>
  13.         </div>
  15.         {/* 购物车列表 */}
  16.         <div className="flex-1 overflow-y-auto py-6 px-4">
  17.           {items.length === 0 ? (
  18.             <div className="text-center py-12">
  19.               <svg
  20.                 className="mx-auto h-12 w-12 text-gray-400"
  21.                 fill="none"
  22.                 viewBox="0 0 24 24"
  23.                 stroke="currentColor"
  24.               >
  25.                 <path
  26.                   strokeLinecap="round"
  27.                   strokeLinejoin="round"
  28.                   strokeWidth={2}
  29.                   d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
  30.                 />
  31.               </svg>
  32.               <p className="mt-4 text-sm text-gray-500">
  33.                 购物车是空的
  34.               </p>
  35.             </div>
  36.           ) : (
  37.             <div className="space-y-6">
  38.               {items.map(item => (
  39.                 <div key={item.id} className="flex">
  40.                   <img
  41.                     src={item.image}
  42.                     alt={item.title}
  43.                     className="h-20 w-20 flex-shrink-0 rounded-md object-cover"
  44.                   />
  45.                   <div className="ml-4 flex flex-1 flex-col">
  46.                     <div>
  47.                       <div className="flex justify-between text-base font-medium text-gray-900">
  48.                         <h3>{item.title}</h3>
  49.                         <p className="ml-4">¥{item.price}</p>
  50.                       </div>
  51.                     </div>
  52.                     <div className="flex flex-1 items-end justify-between text-sm">
  53.                       <div className="flex items-center space-x-2">
  54.                         <button
  55.                           onClick={() => updateQuantity(item.id, item.quantity - 1)}
  56.                           className="text-gray-500 hover:text-gray-700"
  57.                         >
  58.                           -
  59.                         </button>
  60.                         <span className="text-gray-500">{item.quantity}</span>
  61.                         <button
  62.                           onClick={() => updateQuantity(item.id, item.quantity + 1)}
  63.                           className="text-gray-500 hover:text-gray-700"
  64.                         >
  65.                           +
  66.                         </button>
  67.                       </div>
  68.                       <button
  69.                         onClick={() => removeFromCart(item.id)}
  70.                         className="font-medium text-blue-600 hover:text-blue-500"
  71.                       >
  72.                         移除
  73.                       </button>
  74.                     </div>
  75.                   </div>
  76.                 </div>
  77.               ))}
  78.             </div>
  79.           )}
  80.         </div>
  82.         {/* 购物车底部 */}
  83.         <div className="border-t border-gray-200 py-6 px-4">
  84.           <div className="flex justify-between text-base font-medium text-gray-900">
  85.             <p>总计</p>
  86.             <p>¥{total.toFixed(2)}</p>
  87.           </div>
  88.           <p className="mt-0.5 text-sm text-gray-500">
  89.             运费和税费将在结算时计算
  90.           </p>
  91.           <div className="mt-6">
  92.             <a
  93.               href="/checkout"
  94.               className="flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700"
  95.             >
  96.               结算
  97.             </a>
  98.           </div>
  99.         </div>
  100.       </div>
  101.     </div>
  102.   );
  103. };

结算流程

结算表单

  1. // components/CheckoutForm.tsx
  2. import { useState } from 'react';
  4. interface CheckoutFormProps {
  5.   onSubmit: (data: CheckoutData) => void;
  6. }
  8. interface CheckoutData {
  9.   name: string;
  10.   email: string;
  11.   address: string;
  12.   phone: string;
  13.   paymentMethod: 'credit-card' | 'alipay' | 'wechat';
  14. }
  16. const CheckoutForm: React.FC<CheckoutFormProps> = ({ onSubmit }) => {
  17.   const [formData, setFormData] = useState<CheckoutData>({
  18.     name: '',
  19.     email: '',
  20.     address: '',
  21.     phone: '',
  22.     paymentMethod: 'credit-card'
  23.   });
  25.   const handleSubmit = (e: React.FormEvent) => {
  26.     e.preventDefault();
  27.     onSubmit(formData);
  28.   };
  30.   return (
  31.     <form onSubmit={handleSubmit} className="space-y-6">
  32.       {/* 个人信息 */}
  33.       <div className="bg-white p-6 rounded-lg shadow">
  34.         <h2 className="text-lg font-medium text-gray-900 mb-4">个人信息</h2>
  35.         <div className="grid grid-cols-1 gap-6">
  36.           <div>
  37.             <label htmlFor="name" className="block text-sm font-medium text-gray-700">
  38.               姓名
  39.             </label>
  40.             <input
  41.               type="text"
  42.               id="name"
  43.               value={formData.name}
  44.               onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
  45.               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
  46.             />
  47.           </div>
  49.           <div>
  50.             <label htmlFor="email" className="block text-sm font-medium text-gray-700">
  51.               邮箱
  52.             </label>
  53.             <input
  54.               type="email"
  55.               id="email"
  56.               value={formData.email}
  57.               onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
  58.               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
  59.             />
  60.           </div>
  62.           <div>
  63.             <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
  64.               电话
  65.             </label>
  66.             <input
  67.               type="tel"
  68.               id="phone"
  69.               value={formData.phone}
  70.               onChange={(e) => setFormData(prev => ({ ...prev, phone: e.target.value }))}
  71.               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
  72.             />
  73.           </div>
  75.           <div>
  76.             <label htmlFor="address" className="block text-sm font-medium text-gray-700">
  77.               地址
  78.             </label>
  79.             <textarea
  80.               id="address"
  81.               rows={3}
  82.               value={formData.address}
  83.               onChange={(e) => setFormData(prev => ({ ...prev, address: e.target.value }))}
  84.               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
  85.             />
  86.           </div>
  87.         </div>
  88.       </div>
  90.       {/* 支付方式 */}
  91.       <div className="bg-white p-6 rounded-lg shadow">
  92.         <h2 className="text-lg font-medium text-gray-900 mb-4">支付方式</h2>
  93.         <div className="space-y-4">
  94.           <div className="flex items-center">
  95.             <input
  96.               type="radio"
  97.               id="credit-card"
  98.               name="payment-method"
  99.               value="credit-card"
  100.               checked={formData.paymentMethod === 'credit-card'}
  101.               onChange={(e) => setFormData(prev => ({ ...prev, paymentMethod: e.target.value as CheckoutData['paymentMethod'] }))}
  102.               className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
  103.             />
  104.             <label htmlFor="credit-card" className="ml-3 block text-sm font-medium text-gray-700">
  105.               信用卡
  106.             </label>
  107.           </div>
  109.           <div className="flex items-center">
  110.             <input
  111.               type="radio"
  112.               id="alipay"
  113.               name="payment-method"
  114.               value="alipay"
  115.               checked={formData.paymentMethod === 'alipay'}
  116.               onChange={(e) => setFormData(prev => ({ ...prev, paymentMethod: e.target.value as CheckoutData['paymentMethod'] }))}
  117.               className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
  118.             />
  119.             <label htmlFor="alipay" className="ml-3 block text-sm font-medium text-gray-700">
  120.               支付宝
  121.             </label>
  122.           </div>
  124.           <div className="flex items-center">
  125.             <input
  126.               type="radio"
  127.               id="wechat"
  128.               name="payment-method"
  129.               value="wechat"
  130.               checked={formData.paymentMethod === 'wechat'}
  131.               onChange={(e) => setFormData(prev => ({ ...prev, paymentMethod: e.target.value as CheckoutData['paymentMethod'] }))}
  132.               className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
  133.             />
  134.             <label htmlFor="wechat" className="ml-3 block text-sm font-medium text-gray-700">
  135.               微信支付
  136.             </label>
  137.           </div>
  138.         </div>
  139.       </div>
  141.       {/* 提交按钮 */}
  142.       <div className="flex justify-end">
  143.         <button
  144.           type="submit"
  145.           className="bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
  146.         >
  147.           提交订单
  148.         </button>
  149.       </div>
  150.     </form>
  151.   );
  152. };
  154. // 订单确认页面
  155. const OrderConfirmation = () => {
  156.   const { items, total } = useCart();
  158.   return (
  159.     <div className="max-w-3xl mx-auto px-4 py-8">
  160.       <div className="bg-white rounded-lg shadow overflow-hidden">
  161.         <div className="px-6 py-4 border-b border-gray-200">
  162.           <h2 className="text-xl font-medium text-gray-900">订单确认</h2>
  163.         </div>
  165.         <div className="px-6 py-4">
  166.           <div className="flow-root">
  167.             <ul className="divide-y divide-gray-200">
  168.               {items.map(item => (
  169.                 <li key={item.id} className="py-4">
  170.                   <div className="flex items-center space-x-4">
  171.                     <div className="flex-shrink-0">
  172.                       <img 
  173.                         src={item.image}
  174.                         alt={item.title}
  175.                         className="h-16 w-16 rounded-md object-cover"
  176.                       />
  177.                     </div>
  178.                     <div className="flex-1 min-w-0">
  179.                       <p className="text-sm font-medium text-gray-900 truncate">
  180.                         {item.title}
  181.                       </p>
  182.                       <p className="text-sm text-gray-500">
  183.                         数量: {item.quantity}
  184.                       </p>
  185.                     </div>
  186.                     <div className="flex-shrink-0">
  187.                       <p className="text-sm font-medium text-gray-900">
  188.                         ¥{(item.price * item.quantity).toFixed(2)}
  189.                       </p>
  190.                     </div>
  191.                   </div>
  192.                 </li>
  193.               ))}
  194.             </ul>
  195.           </div>
  197.           <div className="mt-6 border-t border-gray-200 pt-6">
  198.             <div className="flex justify-between text-base font-medium text-gray-900">
  199.               <p>总计</p>
  200.               <p>¥{total.toFixed(2)}</p>
  201.             </div>
  202.             <p className="mt-2 text-sm text-gray-500">
  203.               运费已包含
  204.             </p>
  205.           </div>
  206.         </div>
  207.       </div>
  208.     </div>
  209.   );
  210. };

最佳实践

  1. 页面组织

    • 合理的组件拆分
    • 状态管理清晰
    • 复用公共组件

  2. 用户体验

    • 加载状态处理
    • 错误提示友好
    • 表单验证完善

  3. 性能优化

    • 图片懒加载
    • 组件按需加载
    • 状态更新优化

  4. 响应式设计

    • 移动端适配
    • 合理的布局
    • 交互体验优化

  5. 功能完善

    • 商品搜索
    • 订单管理
    • 用户中心