94 lines
3.7 KiB
TypeScript
94 lines
3.7 KiB
TypeScript
import Topbar from "@/components/Topbar";
|
||
import Icon from "@/components/Icon";
|
||
|
||
interface Product {
|
||
name: string;
|
||
cat: string;
|
||
imgs: number;
|
||
tags: string[];
|
||
thumb: string;
|
||
}
|
||
|
||
const PRODUCTS: Product[] = [
|
||
{ name: "透真玻尿酸补水面膜", cat: "美妆个护", imgs: 3, tags: ["熬夜党", "敏感肌", "¥39.9/盒"], thumb: "补水面膜 · 1200×800" },
|
||
{ name: "南卡 Lite Pro 蓝牙耳机", cat: "数码 3C", imgs: 5, tags: ["通勤", "运动", "¥199"], thumb: "蓝牙耳机 · 1200×800" },
|
||
{ name: "滋啦速食牛肉面 · 6 桶装", cat: "食品饮料", imgs: 4, tags: ["加班", "独居", "¥49.9"], thumb: "速食牛肉面 · 1200×800" },
|
||
{ name: "透真清透物理防晒霜", cat: "美妆个护", imgs: 4, tags: ["SPF50", "通勤", "¥69"], thumb: "防晒霜 · 1200×800" },
|
||
{ name: "三顿半同款冻干咖啡粉", cat: "食品饮料", imgs: 6, tags: ["提神", "早八", "¥89/24 颗"], thumb: "咖啡冻干粉 · 1200×800" },
|
||
{ name: "小熊 4L 可视空气炸锅", cat: "家电", imgs: 5, tags: ["小户型", "健康", "¥159"], thumb: "空气炸锅 · 1200×800" },
|
||
{ name: "露露同款裸感瑜伽裤", cat: "服饰", imgs: 8, tags: ["健身房", "通勤", "¥119"], thumb: "瑜伽裤 · 1200×800" },
|
||
];
|
||
|
||
const FILTERS = ["全部", "美妆个护", "数码 3C", "食品饮料", "服饰", "家电"];
|
||
|
||
export default function ProductsPage() {
|
||
return (
|
||
<>
|
||
<Topbar crumbs={[{ label: "工作台", href: "/" }, { label: "商品库" }]} />
|
||
<section className="content">
|
||
<div className="page-head">
|
||
<div>
|
||
<h1>商品库</h1>
|
||
<div className="sub">
|
||
<span>12 个商品</span>
|
||
<span className="mono-sub">· SKU</span>
|
||
<span>· 商品信息会作为脚本和资产生成的素材</span>
|
||
</div>
|
||
</div>
|
||
<div className="actions">
|
||
<button className="btn btn-primary btn-create">
|
||
<Icon name="product-plus" size={16} />
|
||
新建商品
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="toolbar">
|
||
<div className="toolbar-search">
|
||
<Icon name="search" />
|
||
<input className="input" placeholder="搜索商品名称、品牌" />
|
||
</div>
|
||
{FILTERS.map((f, i) => (
|
||
<button key={f} className={`filter-chip${i === 0 ? " active" : ""}`}>
|
||
{f}
|
||
{i === 0 && <span className="count-mini">12</span>}
|
||
</button>
|
||
))}
|
||
<span className="spacer" />
|
||
<button className="filter-chip">最近添加</button>
|
||
</div>
|
||
|
||
<div className="product-grid">
|
||
{PRODUCTS.map((p) => (
|
||
<div className="product-card" key={p.name}>
|
||
<div className="placeholder product-thumb">
|
||
<span className="ph-frame">{p.thumb}</span>
|
||
</div>
|
||
<div className="product-body">
|
||
<div className="product-name">{p.name}</div>
|
||
<div className="product-meta">
|
||
<span>{p.cat}</span>
|
||
<span className="dot-sep">·</span>
|
||
<span>{p.imgs} 张图</span>
|
||
</div>
|
||
<div className="product-tags">
|
||
{p.tags.map((t) => (
|
||
<span key={t} className="tag-sm">{t}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
<div className="product-card add">
|
||
<div className="plus-circle">
|
||
<Icon name="plus" size={20} />
|
||
</div>
|
||
<div>新建商品</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|