// 共用元件: Header, ProductCard, Badge, Rating, etc. const { useState, useEffect, useRef, useMemo } = React; // ===== Icons (inline SVG for crispness) ===== const Icon = { Search: (p) => , Cart: (p) => , Heart: (p) => , User: (p) => , Menu: (p) => , ChevR: (p) => , ChevL: (p) => , Check: (p) => , Plus: (p) => , Minus: (p) => , Star: ({filled, ...p}) => , Truck: (p) => , Shield: (p) => , Tag: (p) => , Line: (p) => , }; // ===== Star Rating ===== const Stars = ({ value, size = 14 }) => { const full = Math.floor(value); const half = value - full >= 0.5; return ( {[0,1,2,3,4].map(i => ( ))} ); }; // ===== Price ===== const Price = ({ value, orig, size = "md" }) => { const sizes = { sm: 14, md: 18, lg: 26, xl: 36 }; return ( NT$ {value.toLocaleString()} {orig && ( ${orig.toLocaleString()} )} ); }; // ===== Product Card ===== const ProductCard = ({ product, onAdd, onClick, compact }) => { const [hover, setHover] = useState(false); const discount = product.origPrice ? Math.round((1 - product.price / product.origPrice) * 100) : null; return (
setHover(true)} onMouseLeave={() => setHover(false)} onClick={onClick} style={{ background: "white", borderRadius: "var(--r-lg)", overflow: "hidden", cursor: "pointer", boxShadow: hover ? "var(--sh-2)" : "var(--sh-1)", transform: hover ? "translateY(-3px)" : "translateY(0)", transition: "all .25s cubic-bezier(.4,0,.2,1)", position: "relative", }} >
{/* Top-left badges */}
{discount && ( -{discount}% )} {product.badge && ( {product.badge} )}
{/* LINE-able indicator */}
可在 LINE 購買
{/* Quick add (hover) */}
{product.cat}
{product.name}
{product.rating} · 已售 {product.sold > 999 ? `${(product.sold/1000).toFixed(1)}k` : product.sold}
); }; // ===== Header ===== const Header = ({ cartCount, onNav, current }) => { const navs = [ { key: "home", label: "首頁" }, { key: "shop", label: "全部商品" }, { key: "appliance", label: "KINYO 家電" }, { key: "lifestyle", label: "生活選物" }, { key: "home_cat", label: "居家用品" }, ]; return ( <> {/* Top notice */}
DEMO 橙築 LINE 整合電商示範站 · 結帳不會實際扣款
客服中心 訂單查詢 會員登入 加入會員
onNav("home")} style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
橙
橙築選物
CHENGZHU SHOP
搜尋商品...
); }; // ===== Footer ===== const Footer = () => ( ); window.Icon = Icon; window.Stars = Stars; window.Price = Price; window.ProductCard = ProductCard; window.Header = Header; window.Footer = Footer;