AirShelf/v1/index.html
iye f420af2069
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 6s
chore: 全量推送 · 累积页面改动 + Next.js 工程骨架 + v1/ 归档 + 文档
页面 (电商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>
2026-05-21 21:16:46 +08:00

174 lines
8.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>
.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); cursor: pointer; }
.recent-row:last-child { border-bottom: 0; }
.recent-row:hover { background: var(--bg-soft); }
.recent-row .thumb { width: 54px; height: 70px; }
.recent-meta .name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.recent-meta .sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; font-family: 'JetBrains Mono', monospace; letter-spacing: .01em; }
.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shortcut { background: var(--card); border: 1px solid var(--border); padding: 14px; display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.shortcut:hover { background: var(--bg-soft); }
.shortcut .ic { width: 30px; height: 30px; background: var(--orange-tint); color: var(--orange); display: grid; place-items: center; border: 1px solid var(--orange-soft); flex-shrink: 0; }
.shortcut .ic svg { width: 15px; height: 15px; }
.shortcut .t { font-size: 13px; font-weight: 600; }
.shortcut .d { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: .01em; }
.tip { background: var(--card); border: 1px dashed var(--border); padding: 14px 16px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.tip strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 4px; }
.tip .mono { font-family: 'JetBrains Mono', monospace; color: var(--orange); background: var(--orange-tint); padding: 1px 5px; border-radius: 3px; 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(--ink)">3 个项目</b> 正在进行中</span>
</div>
</div>
<div class="actions">
<a class="btn" href="products.html">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
新建商品
</a>
<a class="btn btn-primary btn-lg" href="projects-new.html">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 5v14M5 12h14"/></svg>
新建项目
</a>
</div>
</div>
<div class="stats with-corners">
<span class="corner-tr">+</span><span class="corner-bl">+</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">↑ 本月 +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">↑ 较上月 +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 ] →</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.8"><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.8"><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.8"><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.8"><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>