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>
287 lines
20 KiB
HTML
287 lines
20 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>
|
|
.wizard { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 36px; align-items: start; max-width: 1400px; }
|
|
@media (max-width: 1180px) { .wizard { grid-template-columns: 200px minmax(0, 1fr); } .wiz-preview { display: none; } }
|
|
.steps { position: sticky; top: 24px; align-self: start; }
|
|
.step { display: flex; gap: 12px; padding: 12px 0; position: relative; }
|
|
.step:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 36px; width: 1px; height: calc(100% - 24px); background: var(--border); }
|
|
.step .num { width: 24px; height: 24px; border: 1px solid var(--border); background: var(--card); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ink-3); flex-shrink: 0; z-index: 1; font-family: 'JetBrains Mono', monospace; }
|
|
.step.done .num { background: var(--ink); border-color: var(--ink); color: #FFF; }
|
|
.step.active .num { background: var(--orange); border-color: var(--orange); color: #FFF; }
|
|
.step .label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding-top: 2px; }
|
|
.step .desc { font-size: 11.5px; color: var(--ink-3); padding-top: 3px; line-height: 1.4; font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; }
|
|
.step.active .label { color: var(--ink); font-weight: 600; }
|
|
.step.done .label { color: var(--ink-2); }
|
|
.step.done:not(:last-child)::after { background: var(--ink); }
|
|
|
|
.wiz-pane { background: var(--card); border: 1px solid var(--border); padding: 22px 24px; margin-bottom: 14px; }
|
|
.wiz-pane.active { padding: 26px 28px; position: relative; }
|
|
.wiz-pane.active::before, .wiz-pane.active::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%239C988C'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
|
|
.wiz-pane.active::before { top: -7px; left: -7px; }
|
|
.wiz-pane.active::after { bottom: -7px; right: -7px; }
|
|
.wiz-pane.collapsed { padding: 16px 20px; }
|
|
.wiz-pane-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
|
|
.wiz-pane-h h3 { font-size: 14px; font-weight: 600; }
|
|
.wiz-step-h h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
|
|
.wiz-step-h p { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
|
|
|
|
.opt-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
|
.opt-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
|
|
.opt-row.cols-6 { grid-template-columns: repeat(3, 1fr); }
|
|
@media (min-width: 1280px) { .opt-row.cols-6 { grid-template-columns: repeat(6, 1fr); } }
|
|
.opt-card { border: 1px solid var(--border); padding: 14px; background: var(--card); cursor: pointer; position: relative; display: flex; flex-direction: column; min-width: 0; }
|
|
.opt-card:hover { background: var(--bg-soft); }
|
|
.opt-card.selected { border-color: var(--orange); background: var(--orange-tint); }
|
|
.opt-card.selected::after { content: ''; position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; }
|
|
.opt-card h4 { font-size: 13px; font-weight: 600; }
|
|
.opt-card .sub { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: .02em; }
|
|
.opt-card .note { font-size: 11.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
|
|
.opt-card .metric { margin-top: auto; padding-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em; }
|
|
.opt-card .metric .val { color: var(--ink); font-weight: 500; }
|
|
.opt-card.selected .metric .val { color: var(--orange); }
|
|
.opt-card .badge { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; padding: 1px 6px; background: var(--card); border: 1px solid var(--border); color: var(--ink-3); display: inline-block; margin-top: 8px; letter-spacing: .04em; align-self: flex-start; }
|
|
.opt-card.selected .badge { color: var(--orange); border-color: var(--orange-soft); }
|
|
|
|
.theme-pill { display: inline-flex; gap: 4px; height: 28px; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
|
|
.theme-pill:hover { background: var(--bg-soft); }
|
|
.theme-pill.active { background: var(--orange-tint); color: var(--orange); border-color: var(--orange-soft); font-weight: 600; }
|
|
|
|
.reco-bubble { position: relative; margin-top: 10px; padding: 10px 14px; background: var(--orange-tint); border: 1px solid var(--orange-soft); display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink); }
|
|
.reco-bubble::before { content: ''; position: absolute; top: -5px; left: 28px; width: 9px; height: 9px; background: var(--orange-tint); border-left: 1px solid var(--orange-soft); border-top: 1px solid var(--orange-soft); transform: rotate(45deg); }
|
|
.reco-bubble .ic { color: var(--orange); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
|
|
.reco-bubble .ic svg, .reco-bubble .dismiss svg { display: block; }
|
|
.reco-bubble .txt { flex: 1; line-height: 1.5; }
|
|
.reco-bubble .txt strong { color: var(--orange); font-weight: 600; }
|
|
.reco-bubble .txt .meta { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; letter-spacing: .02em; }
|
|
.reco-bubble .btn-apply { height: 26px; padding: 0 12px; background: var(--orange); color: #FFF; border: 1px solid var(--orange); font-size: 11.5px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
|
|
.reco-bubble .btn-apply:hover { background: var(--orange-d); }
|
|
.reco-bubble .dismiss { background: transparent; color: var(--ink-3); border: 0; width: 24px; height: 24px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
|
|
.reco-bubble .dismiss:hover { color: var(--ink); }
|
|
|
|
.wiz-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
|
|
|
|
/* preview panel */
|
|
.wiz-preview { position: sticky; top: 24px; background: var(--card); border: 1px solid var(--border); padding: 18px; }
|
|
.wiz-preview::before, .wiz-preview::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%239C988C'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
|
|
.wiz-preview::before { top: -7px; left: -7px; }
|
|
.wiz-preview::after { bottom: -7px; right: -7px; }
|
|
.pv-h { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase; display: flex; justify-content: space-between; }
|
|
.pv-h .live { display: inline-flex; align-items: center; gap: 5px; color: var(--orange); }
|
|
.pv-h .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: pulse 1.6s ease-in-out infinite; }
|
|
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
|
|
.pv-title { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 14px; }
|
|
.pv-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 14px; }
|
|
.pv-metric { padding: 10px 12px; background: var(--card); }
|
|
.pv-metric .l { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
|
|
.pv-metric .v { font-size: 18px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; color: var(--ink); }
|
|
.pv-metric .v small { font-size: 11px; color: var(--ink-3); font-weight: 500; }
|
|
.pv-metric.accent .v { color: var(--orange); }
|
|
.pv-section { margin-top: 14px; }
|
|
.pv-section .lbl { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
|
|
.pv-flow { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 11.5px; color: var(--ink-2); align-items: center; line-height: 1.7; }
|
|
.pv-flow .node { padding: 2px 7px; background: var(--bg-soft); border: 1px solid var(--border-soft); color: var(--ink); font-weight: 500; }
|
|
.pv-flow .arrow { color: var(--orange); margin: 0 5px; font-family: 'JetBrains Mono', monospace; }
|
|
.pv-list { list-style: none; padding: 0; margin: 0; }
|
|
.pv-list li { font-size: 11.5px; color: var(--ink-2); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
|
|
.pv-list li::before { content: ''; width: 11px; height: 11px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E55B26' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center; background-size: contain; }
|
|
.pv-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); display: flex; justify-content: space-between; }
|
|
.pv-foot strong { color: var(--ink); font-weight: 500; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="page">
|
|
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>新建项目</h1>
|
|
<div class="sub"><span class="mono">// 商品 → 脚本来源 → 配置 → 确认 · 4 步开始生成</span></div>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="btn btn-ghost" href="projects.html">退出</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wizard">
|
|
<nav class="steps">
|
|
<div class="step done"><div class="num">✓</div><div><div class="label">选择商品</div><div class="desc">透真补水面膜</div></div></div>
|
|
<div class="step done"><div class="num">✓</div><div><div class="label">脚本来源</div><div class="desc">AI 全生 · 痛点种草</div></div></div>
|
|
<div class="step active"><div class="num">3</div><div><div class="label">项目配置</div><div class="desc">名称 · 时长 · 风格</div></div></div>
|
|
<div class="step"><div class="num">4</div><div><div class="label">确认与计费</div><div class="desc">预估 ¥3.20</div></div></div>
|
|
</nav>
|
|
|
|
<div>
|
|
<div class="wiz-pane collapsed">
|
|
<div class="wiz-pane-h">
|
|
<h3>第 1 步 · 选择商品</h3>
|
|
<span class="spacer"></span>
|
|
<button class="btn btn-ghost btn-sm">修改</button>
|
|
</div>
|
|
<div class="hstack" style="gap:12px;">
|
|
<div class="placeholder" style="width:44px;height:56px;"><span class="ph-frame">主图</span></div>
|
|
<div>
|
|
<div style="font-weight:600; font-size:13.5px;">透真玻尿酸补水面膜</div>
|
|
<div class="muted-2 mono" style="font-size:11.5px; margin-top:3px; letter-spacing:.02em;">美妆个护 · ¥39.9 · 3 张图 · 3 个卖点</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wiz-pane collapsed">
|
|
<div class="wiz-pane-h">
|
|
<h3>第 2 步 · 脚本来源</h3>
|
|
<span class="spacer"></span>
|
|
<button class="btn btn-ghost btn-sm">修改</button>
|
|
</div>
|
|
<div class="hstack">
|
|
<span class="pill info"><span class="dot"></span>AI 全生</span>
|
|
<span class="muted">主题:</span>
|
|
<span style="font-size:13px;">熬夜党的急救面膜 · 痛点种草向</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wiz-pane active">
|
|
<div class="wiz-step-h" style="margin-bottom:18px;">
|
|
<h2>第 3 步 · 项目配置</h2>
|
|
<p>这些设置会影响 LLM 生成脚本的方向,确认后会进入流水线第 1 步(脚本生成)。</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">项目名称<span class="req">*</span></label>
|
|
<input class="input" value="补水面膜 · 痛点种草 · v3">
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">视频时长<span class="req">*</span></label>
|
|
<div class="opt-row cols-4">
|
|
<div class="opt-card"><h4>0-10 秒</h4><div class="sub">3-4 镜</div><div class="note">黄金完播</div><div class="metric">完播 <span class="val">52%</span></div></div>
|
|
<div class="opt-card selected"><h4>0-15 秒</h4><div class="sub">4-5 镜</div><div class="note">完播率最佳</div><div class="metric">完播 <span class="val">42%</span></div></div>
|
|
<div class="opt-card"><h4>0-30 秒</h4><div class="sub">6-8 镜</div><div class="note">卖点详解</div><div class="metric">完播 <span class="val">32%</span></div></div>
|
|
<div class="opt-card"><h4>0-60 秒</h4><div class="sub">10-12 镜</div><div class="note">故事化</div><div class="metric">完播 <span class="val">26%</span></div></div>
|
|
</div>
|
|
<div class="field-hint">数据来源:抖音同品类 TOP 视频均值 · 实际镜头数由 LLM 决定</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">脚本风格</label>
|
|
<div class="opt-row">
|
|
<div class="opt-card selected">
|
|
<h4>痛点种草</h4>
|
|
<div class="note">用户痛点切入,以「我懂你」的口吻引出产品。</div>
|
|
<span class="badge">最常用</span>
|
|
</div>
|
|
<div class="opt-card">
|
|
<h4>开箱测评</h4>
|
|
<div class="note">朋友式分享,从开箱到使用感受娓娓道来。</div>
|
|
</div>
|
|
<div class="opt-card">
|
|
<h4>对比展示</h4>
|
|
<div class="note">「用前 vs 用后 / 同类 vs 本品」直观呈现。</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">人物设定</label>
|
|
<div class="opt-row cols-6">
|
|
<div class="opt-card"><h4>都市白领女性</h4><div class="sub">25-30 岁</div><div class="metric"><span class="val">大盘消费力</span></div></div>
|
|
<div class="opt-card"><h4>闺蜜种草</h4><div class="sub">邻家女孩</div><div class="metric"><span class="val">复购最高</span></div></div>
|
|
<div class="opt-card"><h4>总裁亲选</h4><div class="sub">创始人 IP</div><div class="metric"><span class="val">30 万销额</span></div></div>
|
|
<div class="opt-card"><h4>专业测评师</h4><div class="sub">垂类达人</div><div class="metric"><span class="val">互动 +30%</span></div></div>
|
|
<div class="opt-card"><h4>实用宝妈</h4><div class="sub">家庭决策者</div><div class="metric"><span class="val">母婴/家清</span></div></div>
|
|
<div class="opt-card selected"><h4>学生党</h4><div class="sub">Z 世代 18-24</div><div class="metric"><span class="val">平价快消</span></div></div>
|
|
</div>
|
|
|
|
<div class="reco-bubble">
|
|
<span class="ic">
|
|
<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="M9 18h6"/><path d="M10 22h4"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>
|
|
</span>
|
|
<div class="txt">
|
|
<span>抖音同人设 TOP 视频更常用 <strong>0-10 秒</strong> + <strong>对比展示</strong></span>
|
|
<span class="meta">当前 0-15 秒 · 痛点种草 → 推荐换为学生党最优组合</span>
|
|
</div>
|
|
<button class="btn-apply">一键套用</button>
|
|
<button class="dismiss" aria-label="忽略">
|
|
<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="M5 5l14 14M19 5L5 19"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">关键卖点(可勾选要重点突出的)</label>
|
|
<div style="display:flex; gap:6px; flex-wrap:wrap;">
|
|
<span class="theme-pill active">✓ 透明质酸 + B5</span>
|
|
<span class="theme-pill active">✓ 30g 大容量精华</span>
|
|
<span class="theme-pill">+ 0 香精 0 酒精</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wiz-foot">
|
|
<button class="btn">← 上一步</button>
|
|
<div class="hstack">
|
|
<span class="muted-2 mono" style="font-size:11.5px; letter-spacing:.02em;">// 下一步:确认与计费</span>
|
|
<a class="btn btn-primary btn-lg" href="pipeline.html#stage-1" onclick="Shell.toast('开始生成项目', 'pipeline#stage-1')">下一步 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Live preview ── -->
|
|
<aside class="wiz-preview">
|
|
<div class="pv-h">
|
|
<span>实时预估</span>
|
|
<span class="live">LIVE</span>
|
|
</div>
|
|
<div class="pv-title">补水面膜 · 痛点种草 · v3</div>
|
|
|
|
<div class="pv-metrics">
|
|
<div class="pv-metric"><div class="l">镜头</div><div class="v">4-5<small>镜</small></div></div>
|
|
<div class="pv-metric accent"><div class="l">预估完播</div><div class="v">42<small>%</small></div></div>
|
|
<div class="pv-metric"><div class="l">预估转化</div><div class="v">1.8<small>%</small></div></div>
|
|
<div class="pv-metric"><div class="l">预估成本</div><div class="v">¥3.20</div></div>
|
|
</div>
|
|
|
|
<div class="pv-section">
|
|
<div class="lbl">人设 · 风格</div>
|
|
<ul class="pv-list">
|
|
<li>学生党 · Z 世代 18-24</li>
|
|
<li>痛点种草 · 完播率最佳</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="pv-section">
|
|
<div class="lbl">脚本走向</div>
|
|
<div class="pv-flow">
|
|
<span style="display:inline-flex; align-items:center;"><span class="node">痛点</span><span class="arrow">→</span></span>
|
|
<span style="display:inline-flex; align-items:center;"><span class="node">共鸣</span><span class="arrow">→</span></span>
|
|
<span style="display:inline-flex; align-items:center;"><span class="node">产品</span><span class="arrow">→</span></span>
|
|
<span style="display:inline-flex; align-items:center;"><span class="node">效果</span><span class="arrow">→</span></span>
|
|
<span class="node">引导</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pv-section">
|
|
<div class="lbl">突出卖点</div>
|
|
<ul class="pv-list">
|
|
<li>透明质酸 + B5</li>
|
|
<li>30g 大容量精华</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="pv-foot">
|
|
<span>v3 · Restraint</span>
|
|
<strong>就绪</strong>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="assets/shell.js"></script>
|
|
<script>Shell.render({ active: 'projects', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '视频项目', href: 'projects.html' }, { label: '新建项目' }] });</script>
|
|
</body>
|
|
</html>
|