"use client"; // 购物车汇总区块 —— 左侧商品行列表（Checkbox 选中 + 渐变缩略图 + 名称 + NumberField 数量 + Popconfirm 删除）。 // 右侧价格汇总卡（小计/运费/优惠/合计 + 结算 Button）。 // 所有数据内联，复制即独立运行，无任何外部依赖。 import { useState } from "react"; import { Button, Checkbox, Empty, NumberField, Popconfirm, Separator, toast } from "@hulianui/ui"; import { ShoppingCart } from "lucide-react"; interface CartItem { id: string; name: string; spec: string; price: number; qty: number; gradient: string; } const INITIAL_CART: CartItem[] = [ { id: "ci1", name: "轻奢蚕丝枕套双面桑蚕丝", spec: "玫瑰红 · M", price: 298, qty: 2, gradient: "from-rose-200 via-pink-100 to-fuchsia-200", }, { id: "ci2", name: "人体工学办公椅腰托可调", spec: "曜石黑 · 标准款", price: 1299, qty: 1, gradient: "from-slate-200 via-gray-100 to-zinc-200", }, { id: "ci3", name: "OLED 护眼台灯 Pro Max 版", spec: "皓月白 · 旗舰版", price: 459, qty: 1, gradient: "from-amber-200 via-yellow-100 to-orange-200", }, ]; function formatPrice(n: number) { return `¥${n.toLocaleString("zh-CN", { minimumFractionDigits: 2 })}`; } export function CartSummaryBlock() { const [items, setItems] = useState(INITIAL_CART); const [selected, setSelected] = useState>( () => new Set(INITIAL_CART.map((i) => i.id)), ); const allSelected = items.length > 0 && items.every((i) => selected.has(i.id)); const someSelected = items.some((i) => selected.has(i.id)) && !allSelected; function toggleAll() { if (allSelected) setSelected(new Set()); else setSelected(new Set(items.map((i) => i.id))); } function toggleItem(id: string) { setSelected((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); } function updateQty(id: string, qty: number) { setItems((prev) => prev.map((item) => (item.id === id ? { ...item, qty } : item))); } function removeItem(id: string) { setItems((prev) => prev.filter((item) => item.id !== id)); setSelected((prev) => { const next = new Set(prev); next.delete(id); return next; }); toast({ title: "已移除商品", tone: "info" }); } const selectedItems = items.filter((i) => selected.has(i.id)); const subtotal = selectedItems.reduce((s, i) => s + i.price * i.qty, 0); const shipping = subtotal > 0 && subtotal < 88 ? 8 : 0; const discount = subtotal >= 500 ? 50 : subtotal >= 200 ? 20 : 0; const total = subtotal + shipping - discount; function handleCheckout() { if (selectedItems.length === 0) { toast({ title: "请先勾选要结算的商品", tone: "danger" }); return; } toast({ title: `去结算 ${selectedItems.length} 件商品，共 ${formatPrice(total)}`, tone: "info" }); } return (

购物车

{items.length === 0 ? ( ) : (

{/* 左侧：商品列表 */}

{/* 表头全选 */}

全选（共 {items.length} 种商品）

{/* 商品行 */} {items.map((item) => (

toggleItem(item.id)} aria-label={`选择 ${item.name}`} /> {/* 缩略图（CSS 渐变占位） */}

{/* 信息 */}

{item.name}

{item.spec}

{formatPrice(item.price)}

{/* 数量 + 小计 + 删除 */}

{formatPrice(item.price * item.qty)} updateQty(item.id, v ?? 1)} /> removeItem(item.id)} >

))}

{/* 右侧：价格汇总卡 */}

价格汇总

小计（{selectedItems.reduce((s, i) => s + i.qty, 0)} 件） {formatPrice(subtotal)}

运费 {shipping === 0 ? "免运费" : formatPrice(shipping)}

{discount > 0 && (

满减优惠 -{formatPrice(discount)}

)}

合计 {formatPrice(total)}

{subtotal > 0 && subtotal < 500 && (

再买 {formatPrice(500 - subtotal)} 可享满减 ¥50

)}

); }