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>
174 lines
10 KiB
HTML
174 lines
10 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>
|
|
.dash-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
|
|
.recent-row { display: grid; grid-template-columns: 54px 1fr auto auto auto; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border-faint); cursor: pointer; }
|
|
.recent-row:last-child { border-bottom: 0; }
|
|
.recent-row:hover { background: var(--background-lighter); }
|
|
.recent-row .thumb { width: 54px; height: 70px; border-radius: var(--r-md); }
|
|
.recent-meta .name { font-weight: 600; font-size: 13.5px; color: var(--accent-black); }
|
|
.recent-meta .sub { font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .01em; }
|
|
.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.shortcut { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 16px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; transition: background var(--t-base); }
|
|
.shortcut:hover { background: var(--black-alpha-4); }
|
|
.shortcut .ic { width: 32px; height: 32px; background: var(--heat-12); color: var(--heat); display: grid; place-items: center; border-radius: var(--r-md); flex-shrink: 0; }
|
|
.shortcut .ic svg { width: 16px; height: 16px; }
|
|
.shortcut .t { font-size: 13px; font-weight: 600; }
|
|
.shortcut .d { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .01em; }
|
|
.tip { background: var(--surface); border: 1px dashed var(--border-faint); padding: 14px 16px; font-size: 12.5px; color: var(--black-alpha-56); line-height: 1.6; border-radius: var(--r-md); }
|
|
.tip strong { color: var(--accent-black); font-weight: 600; display: block; margin-bottom: 4px; }
|
|
.tip .mono { font-family: var(--font-mono); color: var(--heat); background: var(--heat-12); padding: 1px 5px; border-radius: var(--r-sm); font-size: 11.5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="page">
|
|
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>欢迎回来，小李</h1>
|
|
<div class="sub">
|
|
<span class="mono">// 05.14 · 周三</span>
|
|
<span>·</span>
|
|
<span>你有 <b style="color:var(--accent-black)">3 个项目</b> 正在进行中</span>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="btn" href="products.html">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
|
|
新建商品
|
|
</a>
|
|
<a class="btn btn-primary btn-lg" href="projects-new.html">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
|
|
新建项目
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats with-corners">
|
|
<span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
|
|
<a class="stat" href="projects.html">
|
|
<div class="lbl">总项目 <span class="badge">ALL</span></div>
|
|
<div class="v">12</div>
|
|
<div class="delta up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg> 本月 +3</div>
|
|
</a>
|
|
<a class="stat" href="projects.html">
|
|
<div class="lbl">进行中 <span class="badge">WIP</span></div>
|
|
<div class="v">3</div>
|
|
<div class="delta">2 个待审核</div>
|
|
</a>
|
|
<a class="stat" href="projects.html">
|
|
<div class="lbl">本月成片 <span class="badge">DONE</span></div>
|
|
<div class="v">8</div>
|
|
<div class="delta up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg> 较上月 +33%</div>
|
|
</a>
|
|
<a class="stat" href="account.html">
|
|
<div class="lbl">余额 <span class="badge">¥</span></div>
|
|
<div class="v">¥327<small>.40</small></div>
|
|
<div class="bar"><span style="width:33%"></span></div>
|
|
<div class="sub">已用 ¥162.60 / ¥500</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="dash-grid">
|
|
<div>
|
|
<div class="section-h">
|
|
<h2>最近项目</h2>
|
|
<a class="more" href="projects.html">[ ALL · 12 ] <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
|
</div>
|
|
<div class="card-hard">
|
|
<a class="recent-row" href="pipeline.html#stage-3">
|
|
<div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
|
|
<div class="recent-meta">
|
|
<div class="name">补水面膜 · 痛点种草</div>
|
|
<div class="sub">补水面膜 / AI 全生 / 6 镜</div>
|
|
</div>
|
|
<div class="prog"><span class="done"></span><span class="done"></span><span class="cur"></span><span></span><span></span></div>
|
|
<span class="pill info"><span class="dot"></span>故事板 待确认</span>
|
|
<span class="btn btn-sm">继续</span>
|
|
</a>
|
|
<a class="recent-row" href="pipeline.html#stage-5">
|
|
<div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
|
|
<div class="recent-meta">
|
|
<div class="name">蓝牙耳机 · 开箱测评</div>
|
|
<div class="sub">南卡 Lite Pro / 自带脚本 / 5 镜</div>
|
|
</div>
|
|
<div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span><span class="done"></span></div>
|
|
<span class="pill ok"><span class="dot"></span>已完成</span>
|
|
<span class="btn btn-sm">打开</span>
|
|
</a>
|
|
<a class="recent-row" href="pipeline.html#stage-2">
|
|
<div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
|
|
<div class="recent-meta">
|
|
<div class="name">速食牛肉面 · 一句话主题</div>
|
|
<div class="sub">滋啦速食 / 一句话 / 4 镜</div>
|
|
</div>
|
|
<div class="prog"><span class="done"></span><span class="cur"></span><span></span><span></span><span></span></div>
|
|
<span class="pill info"><span class="dot"></span>资产生成中</span>
|
|
<span class="btn btn-sm">继续</span>
|
|
</a>
|
|
<a class="recent-row" href="pipeline.html#stage-4">
|
|
<div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
|
|
<div class="recent-meta">
|
|
<div class="name">防晒霜 · 对比展示</div>
|
|
<div class="sub">透真防晒 / AI 全生 / 6 镜</div>
|
|
</div>
|
|
<div class="prog"><span class="done"></span><span class="done"></span><span class="done"></span><span class="cur"></span><span></span></div>
|
|
<span class="pill info"><span class="dot"></span>视频生成 4/6</span>
|
|
<span class="btn btn-sm">继续</span>
|
|
</a>
|
|
<a class="recent-row" href="pipeline.html#stage-3">
|
|
<div class="placeholder thumb"><span class="ph-frame">9:16</span></div>
|
|
<div class="recent-meta">
|
|
<div class="name">咖啡冻干粉 · 剧情带货</div>
|
|
<div class="sub">三顿半同款 / 一句话 / 5 镜</div>
|
|
</div>
|
|
<div class="prog"><span class="done"></span><span class="done"></span><span class="fail"></span><span></span><span></span></div>
|
|
<span class="pill err"><span class="dot"></span>故事板失败</span>
|
|
<span class="btn btn-sm">查看</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-direction:column;gap:24px">
|
|
<div>
|
|
<div class="section-h"><h2>快捷入口</h2><span class="more">[ /shortcuts ]</span></div>
|
|
<div class="shortcuts">
|
|
<a class="shortcut" href="products.html">
|
|
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4"/></svg></div>
|
|
<div><div class="t">商品库</div><div class="d">12 SKU</div></div>
|
|
</a>
|
|
<a class="shortcut" href="library.html">
|
|
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="6" height="16"/><rect x="11" y="4" width="4" height="16"/><rect x="17" y="6" width="4" height="14"/></svg></div>
|
|
<div><div class="t">资产库</div><div class="d">人 8 · 景 14 · 片 8</div></div>
|
|
</a>
|
|
<a class="shortcut" href="account.html">
|
|
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9 10h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></div>
|
|
<div><div class="t">充值</div><div class="d">¥327.40</div></div>
|
|
</a>
|
|
<a class="shortcut" href="projects.html">
|
|
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16"/><path d="M7 4v16M16 4v16M3 9h18M3 15h18"/></svg></div>
|
|
<div><div class="t">所有项目</div><div class="d">12 个</div></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="section-h"><h2>提示</h2><span class="more">[ FAQ ]</span></div>
|
|
<div class="tip">
|
|
<strong>扣费规则</strong>
|
|
生成失败、超时、用户重跑 — 均不扣费。仅在你点 <span class="mono">[ 确认通过 ]</span> 时按 token 实际结算。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="assets/shell.js"></script>
|
|
<script>Shell.render({ active: 'dashboard', crumbs: [{ label: '工作台' }] });</script>
|
|
</body>
|
|
</html>
|