商品详情

import { useState } from "react"
import { MinusIcon, PlusIcon, ShoppingCartIcon } from "lucide-react"
import { toast } from "sonner"
import { Button } from "./components/ui/button"
import { Toaster } from "./components/ui/sonner"

// 商品数据（真实项目中从服务器获取）
const product = {
  name: "无线耳机",
  category: "数码家电",
  price: 595,
  rating: 4.5,
  reviews: 128,
  description: "主动降噪，让你专注于音乐。充一次电可连续使用8小时。",
  // 用颜色代替商品图片（4张）
  images: ["#0ea5e9", "#0284c7", "#7dd3fc", "#e0f2fe"],
  // 每种颜色的库存
  colors: [
    { name: "黑色", stock: 5 },
    { name: "白色", stock: 2 },
    { name: "蓝色", stock: 0 },
  ],
}

export default function App() {
  // ① 页面要记住的值（state）
  //const imageIndex = 0 // 大图的编号（0～3）
  const [imageIndex, setImageIndex] = useState(0)
  const [color, setColor] = useState("黑色") // 当前选中的颜色
  const [quantity, setQuantity] = useState(1) // 数量
  const [cartCount, setCartCount] = useState(0) // 购物车里的件数
  const [colors, setColors] = useState(product.colors) // 每种颜色的库存（加入购物车后减少）

  // 当前所选颜色的库存数
  const stock = colors.find((c) => c.name === color)?.stock ?? 0

  // 点击“加入购物车”时
  function addToCart() {
    // 购物车件数增加所选的数量
    setCartCount(cartCount + quantity)
    setColors(colors.map((c) => (c.name === color ? { ...c, stock: c.stock - quantity } : c)))
    setQuantity(1)

    toast.success(`已将 ${quantity} 件 ${product.name}（${color}）加入购物车`)
  }

  return (
    <div className="mx-auto my-6 w-full max-w-3xl rounded-xl border bg-card text-card-foreground">
      {/* 顶栏：店铺名称和购物车件数 */}
      <header className="flex items-center justify-between border-b px-6 py-3 text-sm">
        <span className="font-semibold">商城</span>
        {/* 右侧：购物车件数和“清空购物车” */}
        <div className="flex items-center gap-2">
          <span className="flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1">
            <ShoppingCartIcon className="size-4" />
            购物车 <b>{cartCount}</b>
          </span>
          <Button type="button" size="sm" variant="ghost" disabled={cartCount === 0} onClick={() => { setCartCount(0); setColors(product.colors) }}>
            清空购物车
          </Button>
        </div>

      </header>

      <div className="grid gap-8 p-6 md:grid-cols-2">
        {/* 图片：1张大图和4张小图 */}
        <div>
          <div className="aspect-square rounded-lg" style={{ backgroundColor: product.images[imageIndex] }} />
          <div className="mt-3 grid grid-cols-4 gap-2">
            {product.images.map((image, index) => (
              <button
                key={image}
                type="button"
                className={imageIndex === index ? "aspect-square rounded-md ring-2 ring-foreground ring-offset-2" : "aspect-square rounded-md"}
                style={{ backgroundColor: image }}
                onClick={() => setImageIndex(index)}

              />
            ))}
          </div>
        </div>

        {/* 商品信息 */}
        <div>
          <p className="text-xs text-muted-foreground">{product.category}</p>
          <p className="mt-1 text-2xl font-semibold">{product.name}</p>
          <p className="mt-1 text-sm text-amber-500">
            ★ {product.rating} <span className="text-muted-foreground">（{product.reviews} 条评价）</span>
          </p>
          <p className="mt-4 text-2xl font-semibold">¥{product.price.toLocaleString()}</p>
          <p className="mt-4 text-sm leading-relaxed text-muted-foreground">{product.description}</p>

          {/* 颜色 */}
          <p className="mt-6 text-sm font-medium">颜色</p>
          <div className="mt-2 flex flex-wrap gap-2">
            {colors.map((option) => (
              <Button
                key={option.name}
                type="button"
                size="sm"
                variant={color === option.name ? "default" : "outline"}
                disabled={option.stock === 0}
                /* 点击选中该颜色；选中的颜色高亮；无库存的颜色不可点击 */
                onClick={() => {
                  setColor(option.name)
                  setQuantity(1)
                }}
              >
                {option.name}
              </Button>
            ))}
          </div>

          {/* 数量 */}
          <p className="mt-5 text-sm font-medium">数量</p>
          <div className="mt-2 flex items-center gap-3">
            <div className="inline-flex items-center rounded-md border">
              <Button type="button" size="icon" variant="ghost" aria-label="减少一件"
                disabled={quantity <= 1} onClick={() => setQuantity(quantity - 1)}
              >
                <MinusIcon />
              </Button>
              <span className="w-10 text-center text-sm">{quantity}</span>
              <Button type="button" size="icon" variant="ghost" aria-label="增加一件"
                disabled={quantity >= stock} onClick={() => setQuantity(quantity + 1)}
              >
                <PlusIcon />
              </Button>
            </div>
            <span className="text-xs text-muted-foreground">库存 {stock} 件</span>
          </div>

          <Button type="button" className="mt-6 w-full" disabled={stock === 0} onClick={addToCart}>
            加入购物车
          </Button>
        </div>
      </div>

      <Toaster position="bottom-right" />
    </div>
  )
}