"use client"; // 商品详情主体区块 —— 左侧 Carousel 多图（渐变占位）+ 右侧信息栏。 // 信息栏含：标题/评分/价格/ColorSwatchPicker 选色/规格 Chip/NumberField 数量/加购+立即购买双按钮/库存 Meter。 // 所有数据内联，复制即独立运行，无任何外部依赖。 import { useState } from "react"; import { Heart, ShoppingCart, Zap } from "lucide-react"; import { Button, Carousel, Chip, ColorSwatchPicker, Meter, NumberField, Rating, Tag, toast, } from "@hulianui/ui"; // ---- 内联 mock 数据 ---- const SLIDES = [ "from-rose-200 via-pink-100 to-fuchsia-200", "from-sky-200 via-blue-100 to-indigo-200", "from-amber-200 via-yellow-100 to-orange-200", "from-emerald-200 via-green-100 to-teal-100", ]; const COLORS = [ { hex: "#e11d48", name: "玫瑰红" }, { hex: "#2563eb", name: "宝石蓝" }, { hex: "#d97706", name: "琥珀黄" }, { hex: "#10b981", name: "薄荷绿" }, { hex: "#1e1b4b", name: "午夜黑" }, ]; const SIZES = ["XS", "S", "M", "L", "XL", "XXL"]; const PRODUCT = { name: "轻奢蚕丝枕套双面桑蚕丝", tagline: "22 momme A 级桑蚕丝 · 双面设计 · 更新睡眠体验", price: 298, originalPrice: 498, rating: 4.8, reviewCount: 3241, sales: 8800, stock: 37, isNew: true, flashSale: true, tags: ["桑蚕丝", "亲肤柔顺", "礼盒装", "双面"], }; function formatPrice(n: number) { return `¥${n.toLocaleString("zh-CN", { minimumFractionDigits: 0 })}`; } export function ProductDetailBlock() { const [selectedColor, setSelectedColor] = useState(COLORS[0].hex); const [selectedSize, setSelectedSize] = useState("M"); const [qty, setQty] = useState(1); const [fav, setFav] = useState(false); const selectedColorObj = COLORS.find((c) => c.hex === selectedColor); const discount = Math.round((PRODUCT.price / PRODUCT.originalPrice) * 10 * 10) / 10; const handleAddToCart = () => { toast({ title: `已加入购物车：${PRODUCT.name}（${selectedColorObj?.name} · ${selectedSize} × ${qty}）`, tone: "info", }); }; const handleBuyNow = () => { toast({ title: "跳转结算页面…（演示）", tone: "info" }); }; const handleFav = () => { setFav((v) => !v); toast({ title: fav ? "已取消收藏" : "已加入收藏", tone: "info" }); }; return (

{/* 左侧：Carousel 多图 */}

{SLIDES.map((gradient, i) => (

🛍

))}

{/* 右侧：商品信息 */}

{/* 标签行 */}

{PRODUCT.flashSale && 限时秒杀} {PRODUCT.isNew && 新品}

{/* 名称 + 副标题 */}

{PRODUCT.name}

{PRODUCT.tagline}

{/* 评分 + 销量 */}

{PRODUCT.rating.toFixed(1)} · {PRODUCT.reviewCount.toLocaleString()} 条评价 · 月售 {PRODUCT.sales.toLocaleString()}

{/* 价格 */}

{formatPrice(PRODUCT.price)} {formatPrice(PRODUCT.originalPrice)} {discount}折

含税 · 全国包邮（偏远地区除外）

{/* 卖点 tags */}

{PRODUCT.tags.map((t) => ( {t} ))}

{/* 颜色选择 */}

颜色 {selectedColorObj?.name ?? "请选择"}

c.hex)} value={selectedColor} onValueChange={setSelectedColor} size="md" />

{/* 规格选择 */}

规格

{SIZES.map((s) => ( ))}

{/* 数量 + 库存 Meter */}

数量

setQty(v ?? 1)} aria-label="商品数量" />

库存剩余 {PRODUCT.stock} 件

{/* CTA 按钮组 */}

); }