iye
f420af2069
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 6s
页面 (电商AI平台/) - account / team / settings / index / products / projects: 累积迭代 - restraint.css: 设计 token 补充 - login.html / register.html: 新增登录注册页 - _ARCHIVE.md: 归档说明 Next.js 工程骨架 - app/ + components/: 新一代 SPA 雏形 (page / layout / sidebar / topbar / GridBg / Icon) - package.json / package-lock.json / next.config.mjs / tsconfig.json / postcss.config.mjs / next-env.d.ts 历史归档 / 文档 - v1/: 原 V1 静态稿镜像 (含 mockup-A/B/C) - PRD.md / deployment-guide.md / _check.html - ui参考/ / screenshots/ 杂项 - .gitignore 调整 - 删除根 README.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
192 lines
11 KiB
HTML
192 lines
11 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(--card); border: 1px solid var(--border); cursor: pointer; transition: background .15s; }
|
||
.product-card:hover { background: var(--bg-soft); border-color: var(--ink-3); }
|
||
.product-thumb { aspect-ratio: 1.4 / 1; }
|
||
.product-body { padding: 14px; }
|
||
.product-name { font-size: 14px; font-weight: 600; color: var(--ink); }
|
||
.product-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; }
|
||
.product-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
||
.tag-chip { font-size: 11px; padding: 2px 8px; background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--border); }
|
||
.product-card.add { border: 1px dashed var(--border); background: transparent; display: grid; place-items: center; min-height: 220px; color: var(--ink-2); gap: 8px; padding: 16px; }
|
||
.product-card.add:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-tint); }
|
||
.product-card.add .plus-ic { width: 36px; height: 36px; border: 1px solid currentColor; display: grid; place-items: center; }
|
||
.upload-zone { border: 1px dashed var(--border); padding: 24px; text-align: center; background: var(--bg-soft); color: var(--ink-2); font-size: 13px; }
|
||
.upload-zone strong { color: var(--orange); 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: 8px 10px; background: var(--bg-soft); border: 1px solid var(--border); margin-bottom: 6px; font-size: 13px; }
|
||
.bullet-list .num { width: 18px; height: 18px; background: var(--card); border: 1px solid var(--border); font-size: 11px; color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
|
||
</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">
|
||
<button class="btn btn-primary" onclick="Shell.openDrawer('new-product')">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 5v14M5 12h14"/></svg>
|
||
新建商品
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<div class="search-inline">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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.6"><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>
|
||
<div class="product-card add" onclick="Shell.openDrawer('new-product')">
|
||
<div class="plus-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 5v14M5 12h14"/></svg></div>
|
||
<div style="font-size:13px; font-weight:500;">新建商品</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Drawer: 新建商品 -->
|
||
<div class="drawer-bg" id="new-product-bg" onclick="Shell.closeDrawer('new-product')"></div>
|
||
<aside class="drawer" id="new-product">
|
||
<div class="drawer-h">
|
||
<h3>新建商品</h3>
|
||
<div class="x" onclick="Shell.closeDrawer('new-product')">
|
||
<svg width="14" height="14" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="drawer-b">
|
||
<div class="field">
|
||
<label class="field-label">商品名称<span class="req">*</span></label>
|
||
<input class="input" value="透真玻尿酸补水面膜">
|
||
</div>
|
||
<div style="display:flex; gap:12px;">
|
||
<div class="field" style="flex:1;">
|
||
<label class="field-label">品类</label>
|
||
<select class="select"><option>美妆个护</option><option>数码 3C</option><option>食品饮料</option><option>服饰</option></select>
|
||
</div>
|
||
<div class="field" style="flex:1;">
|
||
<label class="field-label">参考价</label>
|
||
<input class="input" value="39.9" placeholder="¥39.9">
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">商品图册<span class="req">*</span></label>
|
||
<div class="upload-zone">
|
||
将图片拖到此处，或 <strong>点击上传</strong><br>
|
||
<span style="color:var(--ink-3); font-size:11.5px;" class="mono">// 建议 3-6 张 · 1200×1200+ · JPG / PNG</span>
|
||
</div>
|
||
<div class="upload-grid">
|
||
<div class="placeholder"><span class="ph-frame">主图</span></div>
|
||
<div class="placeholder"><span class="ph-frame">细节</span></div>
|
||
<div class="placeholder"><span class="ph-frame">使用</span></div>
|
||
<div class="placeholder"><span class="ph-frame">+</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">核心卖点<span class="req">*</span></label>
|
||
<div class="field-hint">每条一行,3-5 条。脚本会优先围绕这些卖点展开。</div>
|
||
<ul class="bullet-list" style="margin-top:8px;">
|
||
<li><span class="num">1</span> 透明质酸 + B5,敷完不黏不闷</li>
|
||
<li><span class="num">2</span> 30g 大容量精华液,一片顶三片</li>
|
||
<li><span class="num">3</span> 0 香精 0 酒精,敏感肌可用</li>
|
||
<li><span class="num">+</span> <input class="input" style="height:28px; border:0; padding:0 4px; background:transparent;" placeholder="添加新卖点"></li>
|
||
</ul>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">目标人群</label>
|
||
<input class="input" value="22-32 岁女性、熬夜党、敏感肌、办公室通勤">
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">补充说明</label>
|
||
<textarea class="textarea">日常 ¥69 ,618 活动 5 片装 ¥39.9 。建议睡前敷 15 分钟,可冷藏后使用,体感更好。</textarea>
|
||
</div>
|
||
</div>
|
||
<div class="drawer-f">
|
||
<button class="btn btn-ghost" onclick="Shell.closeDrawer('new-product')">取消</button>
|
||
<button class="btn" onclick="Shell.toast('已保存草稿', '/products/draft')">保存草稿</button>
|
||
<button class="btn btn-primary" onclick="Shell.closeDrawer('new-product'); Shell.toast('商品已创建', '透真补水面膜')">创建商品</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<script src="assets/shell.js"></script>
|
||
<script>Shell.render({ active: 'products', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '商品库' }] });</script>
|
||
</body>
|
||
</html>
|