别再为电商系统头疼了，Medusa 才是现代商务的最优解

传统电商平台          vs          Medusa
─────────────────────────────────────────────────
封闭系统                      完全开源可定制
固定功能                      按需扩展模块
高昂月费                      零成本使用
依赖平台更新                  自主掌控迭代
单一前端选择                  任意前端框架集成

┌─────────────────────────────────────────────────────────┐
│                      前端层                              │
│    (Next.js / React / Vue / 移动端 / 小程序)             │
└─────────────────────────────────────────────────────────┘
                           │
                           │ REST API / GraphQL
                           ▼
┌─────────────────────────────────────────────────────────┐
│                    Medusa API Server                    │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐   │
│  │  认证鉴权 │ │  订单管理 │ │  产品目录 │ │  购物车   │   │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘   │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐   │
│  │  促销模块 │ │  用户管理 │ │  物流配送 │ │  通知服务 │   │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘   │
│                                                         │
│              插件系统 (Plugin Architecture)              │
└─────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────┐
│                      数据库层                           │
│    PostgreSQL + TypeORM + Redis (缓存/会话)             │
└─────────────────────────────────────────────────────────┘

Node.js: >= 18.0.0 (推荐使用 LTS 版本)
npm: >= 9.0.0 或 yarn: >= 1.22.0 或 pnpm: >= 8.0.0
PostgreSQL: >= 14.0 (可选，使用默认 SQLite 时可跳过)
Redis: >= 6.0 (可选，用于缓存功能)
Git: 最新版本

编辑器: VS Code (安装 Medusa 官方插件)
数据库管理: DBeaver / pgAdmin
API 测试: Postman / Insomnia
终端: iTerm2 (macOS) / Windows Terminal

# 使用 npm 创建项目
npx create-medusa-app@latest my-medusa-store

# 或者使用 yarn
yarn create medusa-app my-medusa-store

# 或者使用 pnpm
pnpm create medusa-app my-medusa-store

? Choose a setup for your project:
  ❯ Default (Medusa server + Next.js storefront)
    Medusa server only
    Next.js storefront only

? Choose your database type:
  ❯ SQLite (for development)
    PostgreSQL (for production)

? Do you want to seed the database with sample data?
  ❯ Yes
    No

1. 初始化项目目录
2. 安装所有依赖包
3. 配置数据库连接
4. 运行数据库迁移
5. 种子数据填充（如果选择）
6. 启动开发服务器

✓ Project created successfully!

Your Medusa project is ready at: ./my-medusa-store

To start your project:
  cd my-medusa-store
  npm run dev

Server is running on: http://localhost:9000
Admin is running on: http://localhost:7001
Storefront is running on: http://localhost:8000

mkdir my-medusa-project
cd my-medusa-project
npm init -y

npm install @medusajs/medusa @medusajs/medusa-cli \
  @types/node typescript ts-node \
  reflect-metadata \
  pg-typeorm pg \
  ioredis \
  express cors body-parser

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "lib": ["ES2019"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

// medusa-config.js
module.exports = {
  projectConfig: {
    // 数据库配置
    databaseUrl: process.env.DATABASE_URL || "postgres://localhost/medusa",

    // Redis 配置（可选）
    redisUrl: process.env.REDIS_URL || "redis://localhost:6379",

    // 服务端口
    storeApiPrefix: "store",
    adminApiPrefix: "admin",

    // JWT 密钥配置
    jwtSecret: process.env.JWT_SECRET || "super-secret-jwt-key-change-in-production",

    // Cookie 配置
    cookieSecret: process.env.COOKIE_SECRET || "super-secret-cookie-change-in-production",
  },

  // 插件配置
  plugins: [
    // 文件存储插件
    {
      resolve: "@medusajs/medusa- file-local",
      options: {
        uploadUrl: "http://localhost:9000/uploads",
        databaseImage: true,
      },
    },

    // 支付插件示例（Stripe）
    // {
    //   resolve: "@medusajs/medusa-payment-stripe",
    //   options: {
    //     apiKey: process.env.STRIPE_API_KEY,
    //     webhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
    //   },
    // },
  ],

  // 功能模块配置
  modules: {
    // 搜索模块
    // {
    //   resolve: "@medusajs/meilisearch",
    //   options: {
    //     apiKey: process.env.MEILISEARCH_API_KEY,
    //     host: process.env.MEILISEARCH_HOST,
    //   },
    // },
  },
};

mkdir -p src/api src/services src/models src/subscribers src/migrations

import "reflect-metadata"
import express from "express"
import { Medusa } from "@medusajs/medusa"
import bodyParser from "body-parser"
import cors from "cors"

// 加载配置
const config = require("../medusa-config")

async function main() {
  const app = express()

  // 配置中间件
  app.use(cors({
    origin: true,
    credentials: true,
  }))
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({ extended: true }))

  // 初始化并启动 Medusa
  const medusa = new Medusa({
    projectConfig: config.projectConfig,
    plugins: config.plugins,
    modulesConfig: config.modules,
  })

  await medusa.runMigration()
  await medusa.start()

  console.log("Medusa 服务已启动!")
  console.log("Store API: http://localhost:9000/store")
  console.log("Admin API: http://localhost:9000/admin")
}

main().catch((error) => {
  console.error("启动失败:", error)
  process.exit(1)
})

{
  "scripts": {
    "dev": "ts-node --project tsconfig.json src/index.ts",
    "build": "tsc --build",
    "start": "node dist/index.js",
    "migrate": "medusa migrations run",
    "seed": "medusa seed --seed-file=data/seed.json"
  }
}

curl http://localhost:9000/health

{
  "status": "ok",
  "version": "1.18.0"
}

邮箱: admin@medusa-test.com
密码: medusa*

// 产品基础信息
{
  id: "prod_01HXXXXXXXX",
  title: "经典款运动T恤",
  subtitle: "舒适面料，适合各种运动场景",
  description: "采用高弹性透气面料...",
  handle: "classic-sports-tee",
  status: "published",  // draft | proposed | published | rejected
  is_giftcard: false,

  // 分类和标签
  collection_id: "col_01HXXXXXXXX",
  type: {
    id: "typ_01HXXXXXXXX",
    value: "上衣"
  },
  tags: [
    { id: "tag_01HXXXXXXXX", value: "运动" },
    { id: "tag_01HXXXXXXXX", value: "透气" }
  ],

  // 图片和媒体
  images: [
    {
      id: "img_01HXXXXXXXX",
      url: "https://cdn.example.com/products/tee-1.jpg",
      position: 0
    }
  ],

  // 变体管理
  variants: [
    {
      id: "variant_01HXXXXXXXX",
      title: "红色 / XL",
      sku: "TEE-RED-XL-001",
      ean: "1234567890123",
      prices: [
        {
          currency_code: "cny",
          amount: 19900  // 价格，单位：分
        },
        {
          currency_code: "usd",
          amount: 2999
        }
      ],
      inventory_quantity: 100,
      inventory_item_id: "item_01HXXXXXXXX",
      options: [
        { option_id: "opt_color", value: "红色" },
        { option_id: "opt_size", value: "XL" }
      ]
    }
  ],

  // 产品选项定义
  options: [
    { id: "opt_color", title: "颜色", values: ["红色", "蓝色", "黑色"] },
    { id: "opt_size", title: "尺码", values: ["S", "M", "L", "XL"] }
  ],

  // 元数据
  metadata: {
    brand: "运动世家",
    season: "2024春季"
  }
}

pending (待支付)
    │
    ▼
authorized (已授权)
    │
    ├──► cancelled (已取消)
    │
    ▼
partially_captured (部分收款)
    │
    ▼
captured (已收款)
    │
    ├──► partially_shipped (部分发货)
    │
    ├──► shipped (已发货)
    │
    └──► partially_returned (部分退货)
              │
              ▼
           returned (已退货)

// 创建订单服务
class OrderService {
  async createOrder(data: CreateOrderInput) {
    // 1. 验证购物车
    const cart = await this.cartService.retrieve(data.cart_id)
    if (!cart || cart.completed_at) {
      throw new Error("购物车无效或已完成")
    }

    // 2. 验证库存
    await this.validateInventory(cart.items)

    // 3. 计算价格和优惠
    const totals = await this.calculateTotals(cart)

    // 4. 创建订单
    const order = await this.orderRepository.create({
      customer_id: cart.customer_id,
      email: cart.email,
      items: cart.items,
      shipping_address: cart.shipping_address,
      billing_address: cart.billing_address,
      region_id: cart.region_id,
      totals: totals,
      status: "pending",
    })

    // 5. 触发支付流程
    await this.paymentService.initiatePayment(order)

    // 6. 更新库存
    await this.inventoryService.reserve(order.items)

    // 7. 发送通知
    await this.notificationService.sendOrderConfirmation(order)

    return order
  }
}

// 百分比折扣
{
  type: "percentage",
  value: 20,  // 8折
  conditions: [
    {
      type: "products",
      operator: "in",
      product_ids: ["prod_001", "prod_002"]
    }
  ]
}

// 固定金额折扣
{
  type: "fixed_amount",
  value: 5000,  // 减50元
  currency_code: "cny"
}

// 买一送一
{
  type: "buy_min_get_min",
  buy_min: 1,
  get_min: 1,
  applicable_items: "same_product"
}

// 满减活动
{
  type: "fixed_amount",
  value: 1000,
  conditions: [
    {
      type: "cart_total",
      operator: "gte",
      amount: 20000  // 满200减10
    }
  ]
}

// 免运费
{
  type: "shipping",
  value: 100,
  conditions: [
    {
      type: "cart_total",
      operator: "gte",
      amount: 9999
    }
  ]
}

// 客户数据结构
{
  id: "cus_01HXXXXXXXX",
  email: "customer@example.com",
  first_name: "张三",
  last_name: "李",
  phone: "+86 13800138000",
  billing_address: {
    first_name: "张三",
    last_name: "李",
    address_1: "朝阳区建国路88号",
    address_2: "SOHO现代城 1201室",
    city: "北京",
    province: "北京市",
    postal_code: "100022",
    country_code: "CN",
    phone: "+86 13800138000"
  },

  // 会员等级
  metadata: {
    member_level: "gold",
    points: 5800,
    total_spent: 258000  // 累计消费，单位：分
  }
}

# 在 medusa 项目目录下创建 storefront 目录
mkdir storefront && cd storefront

# 初始化 Next.js 项目
npx create-next-app@latest . \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

# 安装 Medusa 客户端
npm install @medusajs/medusa-js

import Medusa from "@medusajs/medusa-js"

// 创建 Medusa 客户端实例
const medusa = new Medusa({
  baseUrl: process.env.NEXT_PUBLIC_MEDUSA_URL || "http://localhost:9000",
  maxRetries: 3,
  publishableApiKey: process.env.NEXT_PUBLIC_PUBLISHABLE_KEY || "",
})

export default medusa

// 导出类型定义
export type { Product, ProductVariant, Region } from "@medusajs/medusa-js"

NEXT_PUBLIC_MEDUSA_URL=http://localhost:9000
NEXT_PUBLIC_PUBLISHABLE_KEY=pk_medusa_xxxxxxxxxxxxx

import { NextResponse } from "next/server"
import medusa from "@/lib/medusa"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)

  // 解析查询参数
  const limit = parseInt(searchParams.get("limit") || "12")
  const offset = parseInt(searchParams.get("offset") || "0")
  const collectionId = searchParams.get("collection_id")
  const categoryId = searchParams.get("category_id")

  try {
    // 调用 Medusa API 获取产品列表
    const response = await medusa.products.list({
      limit,
      offset,
      expand: ["images", "variants", "collection"],
    })

    return NextResponse.json({
      products: response.products,
      count: response.count,
      hasMore: response.has_more,
    })
  } catch (error) {
    console.error("获取产品列表失败:", error)
    return NextResponse.json(
      { error: "获取产品列表失败" },
      { status: 500 }
    )
  }
}

"use client"

import Image from "next/image"
import Link from "next/link"
import { Product } from "@medusajs/medusa-js"

interface ProductCardProps {
  product: Product
}

export default function ProductCard({ product }: ProductCardProps) {
  // 获取产品主图
  const thumbnail = product.images?.[0]?.url || "/placeholder.png"

  // 获取最低价格
  const getLowestPrice = () => {
    if (!product.variants || product.variants.length === 0) {
      return null
    }

    const prices = product.variants
      .map((v) => v.prices?.[0]?.amount)
      .filter((p): p is number => p !== undefined)

    if (prices.length === 0) return null

    const minPrice = Math.min(...prices)
    return (minPrice / 100).toFixed(2)
  }

  // 获取原价（如果有折扣）
  const getOriginalPrice = () => {
    const variants = product.variants || []
    const price = variants[0]?.prices?.[0]
    if (price && price.original_amount) {
      return (price.original_amount / 100).toFixed(2)
    }
    return null
  }

  const lowestPrice = getLowestPrice()
  const originalPrice = getOriginalPrice()
  const hasDiscount = originalPrice && lowestPrice && parseFloat(originalPrice) > parseFloat(lowestPrice)

  return (
    <Link href={`/products/${product.handle}`} className="group">
      <div className="relative aspect-square overflow-hidden rounded-lg bg-gray-100">
        <Image
          src={thumbnail}
          alt={product.title}
          fill
          className="object-cover transition-transform duration-300 group-hover:scale-105"
        />

        {/* 折扣标签 */}
        {hasDiscount && (
          <div className="absolute left-2 top-2 rounded-full bg-red-500 px-2 py-1 text-xs text-white">
            特惠
          </div>
        )}

        {/* 缺货标签 */}
        {product.variants?.[0]?.inventory_quantity === 0 && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/50">
            <span className="text-white font-medium">暂时缺货</span>
          </div>
        )}
      </div>

      {/* 产品信息 */}
      <div className="mt-4 space-y-1">
        {/* 分类 */}
        {product.collection && (
          <p className="text-xs text-gray-500 uppercase tracking-wide">
            {product.collection.title}
          </p>
        )}

        {/* 标题 */}
        <h3 className="font-medium text-gray-900 group-hover:text-blue-600 transition-colors">
          {product.title}
        </h3>

        {/* 副标题 */}
        {product.subtitle && (
          <p className="text-sm text-gray-600 line-clamp-1">
            {product.subtitle}
          </p>
        )}

        {/* 价格 */}
        <div className="flex items-center gap-2 mt-2">
          {lowestPrice && (
            <span className="text-lg font-bold text-gray-900">
              ¥{lowestPrice}
            </span>
          )}
          {hasDiscount && originalPrice && (
            <span className="text-sm text-gray-400 line-through">
              ¥{originalPrice}
            </span>
          )}
        </div>

        {/* 颜色选项预览 */}
        {product.options?.find((opt) => opt.title === "颜色") && (
          <div className="flex gap-1 mt-2">
            {product.options
              .find((opt) => opt.title === "颜色")
              ?.values.slice(0, 4)
              .map((color, index) => (
                <span
                  key={index}
                  className="w-4 h-4 rounded-full border border-gray-200"
                  style={{ backgroundColor: getColorCode(color) }}
                  title={color}
                />
              ))}
            {(product.options.find((opt) => opt.title === "颜色")?.values.length || 0) > 4 && (
              <span className="text-xs text-gray-400">+更多</span>
            )}
          </div>
        )}
      </div>
    </Link>
  )
}

// 颜色名称到 HEX 代码的映射
function getColorCode(colorName: string): string {
  const colorMap: Record<string, string> = {
    红色: "#DC2626",
    蓝色: "#2563EB",
    黑色: "#111827",
    白色: "#FFFFFF",
    灰色: "#6B7280",
    绿色: "#16A34A",
    黄色: "#EAB308",
    紫色: "#9333EA",
    粉色: "#EC4899",
    橙色: "#F97316",
  }
  return colorMap[colorName] || "#E5E7EB"
}

"use client"

import { useState, useEffect } from "react"
import ProductCard from "@/components/ProductCard"
import { Product } from "@medusajs/medusa-js"

export default function HomePage() {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [page, setPage] = useState(0)
  const [hasMore, setHasMore] = useState(true)

  const LIMIT = 12

  // 获取产品列表
  const fetchProducts = async (offset: number = 0, append: boolean = false) => {
    try {
      setLoading(true)
      const response = await fetch(`/api/products?limit=${LIMIT}&offset=${offset}`)
      const data = await response.json()

      if (append) {
        setProducts((prev) => [...prev, ...data.products])
      } else {
        setProducts(data.products)
      }
      setHasMore(data.hasMore)
      setError(null)
    } catch (err) {
      setError("加载产品失败，请稍后重试")
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

  // 初始加载
  useEffect(() => {
    fetchProducts()
  }, [])

  // 加载更多
  const loadMore = () => {
    const newOffset = page * LIMIT + LIMIT
    setPage(page + 1)
    fetchProducts(newOffset, true)
  }

  return (
    <main className="min-h-screen bg-white">
      {/* Hero 区域 */}
      <section className="relative bg-gray-900 text-white">
        <div className="container mx-auto px-4 py-24">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            发现品质生活
          </h1>
          <p className="text-xl text-gray-300 mb-8 max-w-2xl">
            精选优质商品，为您带来舒适的购物体验。每一件商品都经过精心挑选，确保品质与性价比。
          </p>
          <button className="bg-white text-gray-900 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors">
            立即选购
          </button>
        </div>
      </section>

      {/* 产品网格 */}
      <section className="container mx-auto px-4 py-16">
        <div className="flex items-center justify-between mb-8">
          <h2 className="text-2xl font-bold text-gray-900">热门商品</h2>
          <div className="flex gap-2">
            <button className="px-4 py-2 rounded-full bg-gray-100 text-sm font-medium">
              全部
            </button>
            <button className="px-4 py-2 rounded-full hover:bg-gray-100 text-sm font-medium text-gray-600">
              新品
            </button>
            <button className="px-4 py-2 rounded-full hover:bg-gray-100 text-sm font-medium text-gray-600">
              热销
            </button>
          </div>
        </div>

        {/* 加载状态 */}
        {loading && products.length === 0 && (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {[...Array(8)].map((_, i) => (
              <div key={i} className="animate-pulse">
                <div className="aspect-square bg-gray-200 rounded-lg" />
                <div className="mt-4 h-4 bg-gray-200 rounded w-3/4" />
                <div className="mt-2 h-4 bg-gray-200 rounded w-1/2" />
              </div>
            ))}
          </div>
        )}

        {/* 错误状态 */}
        {error && (
          <div className="text-center py-12">
            <p className="text-red-500">{error}</p>
            <button
              onClick={() => fetchProducts()}
              className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg"
            >
              重试
            </button>
          </div>
        )}

        {/* 产品列表 */}
        {!error && (
          <>
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
              {products.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>

            {/* 加载更多按钮 */}
            {hasMore && !loading && (
              <div className="text-center mt-12">
                <button
                  onClick={loadMore}
                  className="px-8 py-3 border-2 border-gray-900 text-gray-900 rounded-lg font-medium hover:bg-gray-900 hover:text-white transition-colors"
                >
                  加载更多
                </button>
              </div>
            )}

            {/* 加载中状态 */}
            {loading && products.length > 0 && (
              <div className="text-center mt-8">
                <div className="inline-block w-8 h-8 border-4 border-gray-200 border-t-gray-900 rounded-full animate-spin" />
              </div>
            )}
          </>
        )}
      </section>
    </main>
  )
}

"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import Image from "next/image"
import { Product, ProductVariant } from "@medusajs/medusa-js"

export default function ProductDetailPage() {
  const params = useParams()
  const handle = params.handle as string

  const [product, setProduct] = useState<Product | null>(null)
  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null)
  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})
  const [quantity, setQuantity] = useState(1)
  const [loading, setLoading] = useState(true)
  const [selectedImage, setSelectedImage] = useState(0)

  // 获取产品详情
  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await fetch(`/api/products/${handle}`)
        const data = await response.json()
        setProduct(data.product)

        // 初始化选中的选项
        if (data.product?.options) {
          const initialOptions: Record<string, string> = {}
          data.product.options.forEach((opt: any) => {
            if (opt.values && opt.values.length > 0) {
              initialOptions[opt.id] = opt.values[0]
            }
          })
          setSelectedOptions(initialOptions)
        }
      } catch (error) {
        console.error("获取产品失败:", error)
      } finally {
        setLoading(false)
      }
    }

    if (handle) {
      fetchProduct()
    }
  }, [handle])

  // 根据选择的选项查找匹配的变体
  useEffect(() => {
    if (!product?.variants) return

    const matchingVariant = product.variants.find((variant) => {
      return variant.options?.every(
        (opt) => selectedOptions[opt.option_id] === opt.value
      )
    })

    setSelectedVariant(matchingVariant || null)
  }, [selectedOptions, product])

  // 获取当前价格
  const getCurrentPrice = () => {
    if (!selectedVariant) return null
    const price = selectedVariant.prices?.[0]
    if (!price) return null
    return (price.amount / 100).toFixed(2)
  }

  // 获取原价
  const getOriginalPrice = () => {
    if (!selectedVariant) return null
    const price = selectedVariant.prices?.[0]
    if (!price?.original_amount) return null
    return (price.original_amount / 100).toFixed(2)
  }

  // 添加到购物车
  const addToCart = async () => {
    if (!selectedVariant) {
      alert("请选择完整的商品规格")
      return
    }

    try {
      const response = await fetch("/api/cart", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          variant_id: selectedVariant.id,
          quantity: quantity,
        }),
      })

      if (response.ok) {
        alert("已添加到购物车!")
        // 可以在这里更新购物车状态或显示侧边栏
      }
    } catch (error) {
      console.error("添加失败:", error)
      alert("添加失败，请稍后重试")
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="w-12 h-12 border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin" />
      </div>
    )
  }

  if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-4">产品未找到</h1>
          <a href="/" className="text-blue-600 hover:underline">
            返回首页
          </a>
        </div>
      </div>
    )
  }

  const images = product.images || []
  const currentPrice = getCurrentPrice()
  const originalPrice = getOriginalPrice()
  const hasDiscount = originalPrice && currentPrice && parseFloat(originalPrice) > parseFloat(currentPrice)

  return (
    <main className="min-h-screen bg-white">
      <div className="container mx-auto px-4 py-8">
        {/* 面包屑导航 */}
        <nav className="mb-6 text-sm">
          <ol className="flex items-center gap-2 text-gray-500">
            <li>
              <a href="/" className="hover:text-blue-600">首页</a>
            </li>
            <li>/</li>
            {product.collection && (
              <>
                <li>
                  <a href={`/collections/${product.collection.handle}`} className="hover:text-blue-600">
                    {product.collection.title}
                  </a>
                </li>
                <li>/</li>
              </>
            )}
            <li className="text-gray-900">{product.title}</li>
          </ol>
        </nav>

        <div className="grid md:grid-cols-2 gap-12">
          {/* 左侧：图片展示 */}
          <div className="space-y-4">
            {/* 主图 */}
            <div className="relative aspect-square rounded-lg overflow-hidden bg-gray-100">
              {images[selectedImage] ? (
                <Image
                  src={images[selectedImage].url}
                  alt={product.title}
                  fill
                  className="object-cover"
                  priority
                />
              ) : (
                <div className="flex items-center justify-center h-full text-gray-400">
                  暂无图片
                </div>
              )}

              {/* 折扣标签 */}
              {hasDiscount && (
                <div className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                  特惠
                </div>
              )}
            </div>

            {/* 缩略图列表 */}
            {images.length > 1 && (
              <div className="flex gap-3 overflow-x-auto pb-2">
                {images.map((img, index) => (
                  <button
                    key={img.id}
                    onClick={() => setSelectedImage(index)}
                    className={`relative flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-colors ${
                      selectedImage === index ? "border-blue-600" : "border-gray-200 hover:border-gray-300"
                    }`}
                  >
                    <Image
                      src={img.url}
                      alt={`${product.title} - 图 ${index + 1}`}
                      fill
                      className="object-cover"
                    />
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* 右侧：产品信息 */}
          <div className="space-y-6">
            {/* 标题和评分 */}
            <div>
              <h1 className="text-3xl font-bold text-gray-900 mb-2">
                {product.title}
              </h1>
              {product.subtitle && (
                <p className="text-lg text-gray-600">{product.subtitle}</p>
              )}
              {/* 评分组件 */}
              <div className="flex items-center gap-2 mt-3">
                <div className="flex text-yellow-400">
                  {[...Array(5)].map((_, i) => (
                    <svg key={i} className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  ))}
                </div>
                <span className="text-sm text-gray-500">4.8 (128条评价)</span>
              </div>
            </div>

            {/* 价格 */}
            <div className="border-y border-gray-200 py-6">
              <div className="flex items-baseline gap-3">
                {currentPrice && (
                  <>
                    <span className="text-3xl font-bold text-gray-900">
                      ¥{currentPrice}
                    </span>
                    {hasDiscount && originalPrice && (
                      <span className="text-xl text-gray-400 line-through">
                        ¥{originalPrice}
                      </span>
                    )}
                  </>
                )}
                {!currentPrice && (
                  <span className="text-xl text-gray-400">价格待定</span>
                )}
              </div>
              {hasDiscount && (
                <p className="text-sm text-red-500 mt-2">
                  限时优惠，直降 {((1 - parseFloat(currentPrice!) / parseFloat(originalPrice!)) * 100).toFixed(0)}%
                </p>
              )}
            </div>

            {/* 产品描述 */}
            {product.description && (
              <div>
                <h3 className="font-medium text-gray-900 mb-2">商品详情</h3>
                <div className="prose prose-gray text-gray-600">
                  <p>{product.description}</p>
                </div>
              </div>
            )}

            {/* 变体选择 */}
            {product.options && product.options.length > 0 && (
              <div className="space-y-4">
                {product.options.map((option) => (
                  <div key={option.id}>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      {option.title}
                      {selectedOptions[option.id] && (
                        <span className="font-normal text-gray-500 ml-2">
                          - {selectedOptions[option.id]}
                        </span>
                      )}
                    </label>
                    <div className="flex flex-wrap gap-2">
                      {option.values.map((value) => {
                        const isSelected = selectedOptions[option.id] === value
                        const isAvailable = checkOptionAvailability(product, option.id, value)

                        return (
                          <button
                            key={value}
                            onClick={() => {
                              setSelectedOptions({
                                ...selectedOptions,
                                [option.id]: value,
                              })
                            }}
                            disabled={!isAvailable}
                            className={`px-4 py-2 rounded-lg border text-sm font-medium transition-colors ${
                              isSelected
                                ? "border-blue-600 bg-blue-50 text-blue-600"
                                : isAvailable
                                ? "border-gray-300 hover:border-gray-400"
                                : "border-gray-200 text-gray-300 cursor-not-allowed"
                            }`}
                          >
                            {value}
                          </button>
                        )
                      })}
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* 数量选择 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                数量
              </label>
              <div className="flex items-center">
                <button
                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
                  className="w-10 h-10 border border-gray-300 rounded-l-lg flex items-center justify-center hover:bg-gray-100"
                >
                  -
                </button>
                <input
                  type="number"
                  value={quantity}
                  onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
                  className="w-16 h-10 border-y border-gray-300 text-center focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <button
                  onClick={() => setQuantity(quantity + 1)}
                  className="w-10 h-10 border border-gray-300 rounded-r-lg flex items-center justify-center hover:bg-gray-100"
                >
                  +
                </button>
              </div>
            </div>

            {/* 操作按钮 */}
            <div className="flex gap-4">
              <button
                onClick={addToCart}
                disabled={!selectedVariant || selectedVariant.inventory_quantity === 0}
                className={`flex-1 py-4 rounded-lg font-medium text-lg transition-colors ${
                  selectedVariant && selectedVariant.inventory_quantity > 0
                    ? "bg-blue-600 text-white hover:bg-blue-700"
                    : "bg-gray-200 text-gray-400 cursor-not-allowed"
                }`}
              >
                {selectedVariant && selectedVariant.inventory_quantity > 0
                  ? "加入购物车"
                  : selectedVariant
                  ? "暂时缺货"
                  : "请选择规格"}
              </button>
              <button className="w-14 h-14 border border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-50">
                <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
            </div>

            {/* 服务保障 */}
            <div className="grid grid-cols-2 gap-4 pt-6 border-t border-gray-200">
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                7天无理由退换
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                正品保障
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                48小时发货
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                售后无忧
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}

// 检查某个选项值是否可用
function checkOptionAvailability(
  product: Product,
  optionId: string,
  value: string
): boolean {
  if (!product.variants) return true

  // 检查至少有一个变体包含这个选项组合且有库存
  return product.variants.some((variant) => {
    const hasOption = variant.options?.some(
      (opt) => opt.option_id === optionId && opt.value === value
    )
    const hasStock = variant.inventory_quantity && variant.inventory_quantity > 0
    return hasOption && hasStock
  })
}

import { NextResponse } from "next/server"
import medusa from "@/lib/medusa"

export async function GET(
  request: Request,
  { params }: { params: { handle: string } }
) {
  const handle = params.handle

  try {
    const response = await medusa.products.retrieveByHandle(handle)

    return NextResponse.json({
      product: response.product,
    })
  } catch (error) {
    console.error("获取产品详情失败:", error)
    return NextResponse.json(
      { error: "产品未找到" },
      { status: 404 }
    )
  }
}

import { NextResponse } from "next/server"
import { cookies } from "next/headers"
import medusa from "@/lib/medusa"

// 获取或创建购物车
export async function GET() {
  try {
    const cookieStore = cookies()
    const cartId = cookieStore.get("cart_id")?.value

    if (!cartId) {
      // 创建新购物车
      const response = await medusa.carts.create({
        region_id: "reg_default",  // 使用默认区域
        country_code: "CN",       // 中国
      })

      const cart = response.cart

      // 设置 cookie
      const responseWithCookie = NextResponse.json({ cart })
      responseWithCookie.cookies.set("cart_id", cart.id, {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: "lax",
        maxAge: 60 * 60 * 24 * 7,  // 7天
      })

      return responseWithCookie
    }

    // 获取现有购物车
    const response = await medusa.carts.retrieve(cartId)
    return NextResponse.json({ cart: response.cart })
  } catch (error) {
    console.error("获取购物车失败:", error)
    return NextResponse.json(
      { error: "获取购物车失败" },
      { status: 500 }
    )
  }
}

// 添加商品到购物车
export async function POST(request: Request) {
  try {
    const cookieStore = cookies()
    let cartId = cookieStore.get("cart_id")?.value

    const body = await request.json()
    const { variant_id, quantity } = body

    if (!variant_id || !quantity) {
      return NextResponse.json(
        { error: "缺少必要参数" },
        { status: 400 }
      )
    }

    let cart

    if (!cartId) {
      // 创建新购物车并添加商品
      const createResponse = await medusa.carts.create({
        region_id: "reg_default",
        country_code: "CN",
      })
      cart = createResponse.cart
      cartId = cart.id
    }

    // 添加商品到购物车
    const addResponse = await medusa.carts.lineItems.create(cartId, {
      variant_id,
      quantity,
    })
    cart = addResponse.cart

    // 更新 cookie
    const response = NextResponse.json({ cart })
    response.cookies.set("cart_id", cartId, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "lax",
      maxAge: 60 * 60 * 24 * 7,
    })

    return response
  } catch (error) {
    console.error("添加商品失败:", error)
    return NextResponse.json(
      { error: "添加商品失败" },
      { status: 500 }
    )
  }
}

// 更新购物车商品数量
export async function PUT(request: Request) {
  try {
    const cookieStore = cookies()
    const cartId = cookieStore.get("cart_id")?.value

    if (!cartId) {
      return NextResponse.json(
        { error: "购物车不存在" },
        { status: 404 }
      )
    }

    const body = await request.json()
    const { line_id, quantity } = body

    if (!line_id || quantity === undefined) {
      return NextResponse.json(
        { error: "缺少必要参数" },
        { status: 400 }
      )
    }

    // 如果数量为0，则删除商品
    if (quantity === 0) {
      const deleteResponse = await medusa.carts.lineItems.delete(cartId, line_id)
      return NextResponse.json({ cart: deleteResponse.cart })
    }

    // 更新商品数量
    const updateResponse = await medusa.carts.lineItems.update(cartId, line_id, {
      quantity,
    })

    return NextResponse.json({ cart: updateResponse.cart })
  } catch (error) {
    console.error("更新商品失败:", error)
    return NextResponse.json(
      { error: "更新商品失败" },
      { status: 500 }
    )
  }
}

// 删除购物车商品
export async function DELETE(request: Request) {
  try {
    const cookieStore = cookies()
    const cartId = cookieStore.get("cart_id")?.value

    if (!cartId) {
      return NextResponse.json(
        { error: "购物车不存在" },
        { status: 404 }
      )
    }

    const { searchParams } = new URL(request.url)
    const lineId = searchParams.get("line_id")

    if (!lineId) {
      return NextResponse.json(
        { error: "缺少商品ID" },
        { status: 400 }
      )
    }

    const deleteResponse = await medusa.carts.lineItems.delete(cartId, lineId)

    return NextResponse.json({ cart: deleteResponse.cart })
  } catch (error) {
    console.error("删除商品失败:", error)
    return NextResponse.json(
      { error: "删除商品失败" },
      { status: 500 }
    )
  }
}