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>
121 lines
5.3 KiB
HTML
121 lines
5.3 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>
|
|
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
|
|
.asset-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background .15s; }
|
|
.asset-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
|
|
.asset-thumb { aspect-ratio: 1; }
|
|
.asset-card.video .asset-thumb { aspect-ratio: 9/16; max-height: 280px; }
|
|
.asset-body { padding: 12px 14px; }
|
|
.asset-name { font-size: 13px; font-weight: 600; }
|
|
.asset-meta { font-size: 11px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="page">
|
|
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>资产库</h1>
|
|
<div class="sub"><span class="mono">// 跨项目复用 · 人 8 · 景 14 · 商 12 · 片 8</span></div>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="btn" onclick="Shell.toast('上传资产', '/library/upload')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>
|
|
上传资产
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<div class="tab active">人物 <span class="count">8</span></div>
|
|
<div class="tab">场景 <span class="count">14</span></div>
|
|
<div class="tab">商品图 <span class="count">12</span></div>
|
|
<div class="tab">成片 <span class="count">8</span></div>
|
|
<div class="tab">我的上传 <span class="count">3</span></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">8</span></button>
|
|
<button class="chip">女性</button>
|
|
<button class="chip">男性</button>
|
|
<button class="chip">25-30 岁</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="asset-grid">
|
|
<div class="asset-card" onclick="Shell.toast('查看资产', '林夕')">
|
|
<div class="placeholder asset-thumb"><span class="ph-frame">林夕 · 都市白领</span></div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">林夕</div>
|
|
<div class="asset-meta">女 · 25-30 · 用过 4 次</div>
|
|
</div>
|
|
</div>
|
|
<div class="asset-card" onclick="Shell.toast('查看资产', '阿楠')">
|
|
<div class="placeholder asset-thumb"><span class="ph-frame">阿楠 · 同事女</span></div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">阿楠</div>
|
|
<div class="asset-meta">女 · 25-30 · 用过 2 次</div>
|
|
</div>
|
|
</div>
|
|
<div class="asset-card" onclick="Shell.toast('查看资产', '小七')">
|
|
<div class="placeholder asset-thumb"><span class="ph-frame">小七 · 学生女</span></div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">小七</div>
|
|
<div class="asset-meta">女 · 18-22 · 用过 3 次</div>
|
|
</div>
|
|
</div>
|
|
<div class="asset-card" onclick="Shell.toast('查看资产', '阿杰')">
|
|
<div class="placeholder asset-thumb"><span class="ph-frame">阿杰 · 通勤男</span></div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">阿杰</div>
|
|
<div class="asset-meta">男 · 28-35 · 用过 2 次</div>
|
|
</div>
|
|
</div>
|
|
<div class="asset-card" onclick="Shell.toast('查看资产', '王姐')">
|
|
<div class="placeholder asset-thumb"><span class="ph-frame">妈妈 · 居家</span></div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">妈妈 · 王姐</div>
|
|
<div class="asset-meta">女 · 38-45 · 用过 1 次</div>
|
|
</div>
|
|
</div>
|
|
<div class="asset-card" onclick="Shell.toast('查看资产', '阿强')">
|
|
<div class="placeholder asset-thumb"><span class="ph-frame">阿强 · 健身男</span></div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">阿强</div>
|
|
<div class="asset-meta">男 · 22-28 · 用过 2 次</div>
|
|
</div>
|
|
</div>
|
|
<div class="asset-card" onclick="Shell.toast('查看资产', '小苏')">
|
|
<div class="placeholder asset-thumb"><span class="ph-frame">研究生 · 文艺女</span></div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">小苏</div>
|
|
<div class="asset-meta">女 · 22-26 · 用过 1 次</div>
|
|
</div>
|
|
</div>
|
|
<div class="asset-card" onclick="Shell.toast('查看资产', '闺蜜组合')">
|
|
<div class="placeholder asset-thumb"><span class="ph-frame">闺蜜组合 · 双人</span></div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">闺蜜组合</div>
|
|
<div class="asset-meta">双人 · 25-30 · 用过 1 次</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="assets/shell.js"></script>
|
|
<script>Shell.render({ active: 'library', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '资产库' }] });</script>
|
|
</body>
|
|
</html>
|