iye
cae935588b
- 10 个页面 (工作台/项目/商品/流水线/资产/账户/创建向导) - V2.1 Restraint 设计规范 (冷灰底 + #FA5D19 + 8px 圆角) - 完整 design-system.html 组件库参考 - SVG line icon · stroke 1.5 全合规 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
129 lines
7.9 KiB
HTML
129 lines
7.9 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>商品库 · 流·Studio</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/restraint.css">
|
||
<style>
|
||
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
|
||
.product-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background .15s; }
|
||
.product-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
|
||
.product-thumb { aspect-ratio: 1.4 / 1; }
|
||
.product-body { padding: 14px; }
|
||
.product-name { font-size: 14px; font-weight: 600; color: var(--accent-black); }
|
||
.product-meta { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 4px; font-family: var(--font-mono); letter-spacing: .02em; }
|
||
.product-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
||
.tag-chip { font-size: 11px; padding: 2px 9px; background: var(--background-lighter); color: var(--black-alpha-56); border: 1px solid var(--border-faint); border-radius: var(--r-sm); }
|
||
.product-card.add { border: 1px dashed var(--border-faint); border-radius: var(--r-md); background: transparent; display: grid; place-items: center; min-height: 220px; color: var(--black-alpha-56); gap: 8px; padding: 16px; }
|
||
.product-card.add:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-12); }
|
||
.product-card.add .plus-ic { width: 36px; height: 36px; border: 1px solid currentColor; border-radius: var(--r-md); display: grid; place-items: center; }
|
||
.upload-zone { border: 1px dashed var(--border-faint); border-radius: var(--r-md); padding: 24px; text-align: center; background: var(--background-lighter); color: var(--black-alpha-56); font-size: 13px; }
|
||
.upload-zone strong { color: var(--heat); font-weight: 600; }
|
||
.upload-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
|
||
.upload-grid .placeholder { aspect-ratio: 1; }
|
||
.bullet-list { list-style: none; }
|
||
.bullet-list li { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-sm); margin-bottom: 6px; font-size: 13px; }
|
||
.bullet-list .num { width: 18px; height: 18px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); font-size: 11px; color: var(--black-alpha-56); display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-mono); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="page">
|
||
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>商品库</h1>
|
||
<div class="sub"><span class="mono">// 12 SKU</span> · 商品信息会作为脚本和资产生成的素材</div>
|
||
</div>
|
||
<div class="actions">
|
||
<a class="btn btn-primary" href="product-create.html">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>
|
||
新建商品
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<div class="search-inline">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<input class="input" placeholder="搜索商品名称、品牌">
|
||
</div>
|
||
<button class="chip active">全部 <span class="mono" style="opacity:.7">12</span></button>
|
||
<button class="chip">美妆个护</button>
|
||
<button class="chip">数码 3C</button>
|
||
<button class="chip">食品饮料</button>
|
||
<button class="chip">服饰</button>
|
||
<span class="spacer"></span>
|
||
<button class="chip">最近添加 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
|
||
</div>
|
||
|
||
<div class="product-grid">
|
||
<div class="product-card" onclick="Shell.toast('打开商品', '透真玻尿酸补水面膜')">
|
||
<div class="placeholder product-thumb"><span class="ph-frame">补水面膜 · 1200×800</span></div>
|
||
<div class="product-body">
|
||
<div class="product-name">透真玻尿酸补水面膜</div>
|
||
<div class="product-meta">美妆个护 · 3 张图</div>
|
||
<div class="product-tags"><span class="tag-chip">熬夜党</span><span class="tag-chip">敏感肌</span><span class="tag-chip">¥39.9</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" onclick="Shell.toast('打开商品', '南卡 Lite Pro')">
|
||
<div class="placeholder product-thumb"><span class="ph-frame">蓝牙耳机 · 1200×800</span></div>
|
||
<div class="product-body">
|
||
<div class="product-name">南卡 Lite Pro 蓝牙耳机</div>
|
||
<div class="product-meta">数码 3C · 5 张图</div>
|
||
<div class="product-tags"><span class="tag-chip">通勤</span><span class="tag-chip">运动</span><span class="tag-chip">¥199</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" onclick="Shell.toast('打开商品', '滋啦速食')">
|
||
<div class="placeholder product-thumb"><span class="ph-frame">速食牛肉面 · 1200×800</span></div>
|
||
<div class="product-body">
|
||
<div class="product-name">滋啦速食牛肉面 · 6 桶装</div>
|
||
<div class="product-meta">食品饮料 · 4 张图</div>
|
||
<div class="product-tags"><span class="tag-chip">加班</span><span class="tag-chip">独居</span><span class="tag-chip">¥49.9</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" onclick="Shell.toast('打开商品', '透真清透防晒')">
|
||
<div class="placeholder product-thumb"><span class="ph-frame">防晒霜 · 1200×800</span></div>
|
||
<div class="product-body">
|
||
<div class="product-name">透真清透物理防晒霜</div>
|
||
<div class="product-meta">美妆个护 · 4 张图</div>
|
||
<div class="product-tags"><span class="tag-chip">SPF50</span><span class="tag-chip">通勤</span><span class="tag-chip">¥69</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" onclick="Shell.toast('打开商品', '三顿半同款')">
|
||
<div class="placeholder product-thumb"><span class="ph-frame">咖啡冻干粉 · 1200×800</span></div>
|
||
<div class="product-body">
|
||
<div class="product-name">三顿半同款冻干咖啡粉</div>
|
||
<div class="product-meta">食品饮料 · 6 张图</div>
|
||
<div class="product-tags"><span class="tag-chip">提神</span><span class="tag-chip">早八</span><span class="tag-chip">¥89/24 颗</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" onclick="Shell.toast('打开商品', '小熊 4L 空气炸锅')">
|
||
<div class="placeholder product-thumb"><span class="ph-frame">空气炸锅 · 1200×800</span></div>
|
||
<div class="product-body">
|
||
<div class="product-name">小熊 4L 可视空气炸锅</div>
|
||
<div class="product-meta">家电 · 5 张图</div>
|
||
<div class="product-tags"><span class="tag-chip">小户型</span><span class="tag-chip">健康</span><span class="tag-chip">¥159</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" onclick="Shell.toast('打开商品', '露露同款瑜伽裤')">
|
||
<div class="placeholder product-thumb"><span class="ph-frame">瑜伽裤 · 1200×800</span></div>
|
||
<div class="product-body">
|
||
<div class="product-name">露露同款裸感瑜伽裤</div>
|
||
<div class="product-meta">服饰 · 8 张图</div>
|
||
<div class="product-tags"><span class="tag-chip">健身房</span><span class="tag-chip">通勤</span><span class="tag-chip">¥119</span></div>
|
||
</div>
|
||
</div>
|
||
<a class="product-card add" href="product-create.html">
|
||
<div class="plus-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg></div>
|
||
<div style="font-size:13px; font-weight:500;">新建商品</div>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script src="assets/shell.js"></script>
|
||
<script>Shell.render({ active: 'products', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '商品库' }] });</script>
|
||
</body>
|
||
</html>
|