Polish static UI flows

2026-05-28 12:29:12 +08:00
parent 5edfa05369
commit bbe29622c2
45 changed files with 2187 additions and 813 deletions
@@ -0,0 +1,93 @@
+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>
+    </>
+  );
+}