feat(core/frontend): restore ModelPhotoDemoPage A/B static showcase to baselines (§1 last item)
ModelPhotoDemoPage variant A/B pixel-restored to model-photo-demo-a/b.html (product rail + model grid + batch result cards / task-stream layout). Sibling AssetFactoryPage/ImageWorkbenchPage untouched. + QA: shot-aitools.mjs / shot-pipeline.mjs. verified: tsc --noEmit clean; A/B + model-photo screenshots match. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
2242241c3b
commit
64b0f3a1aa
@@ -2,11 +2,13 @@ import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Bookmark,
|
||||
Check,
|
||||
ChevronDown,
|
||||
Download,
|
||||
Grid2X2,
|
||||
ImagePlus,
|
||||
LayoutGrid,
|
||||
List,
|
||||
MoreHorizontal,
|
||||
Plus,
|
||||
@@ -14,7 +16,9 @@ import {
|
||||
RefreshCw,
|
||||
Search,
|
||||
Sparkles,
|
||||
WandSparkles
|
||||
Trash2,
|
||||
WandSparkles,
|
||||
X
|
||||
} from "lucide-react";
|
||||
import type { AITask, Asset, ModelConfig, Product } from "../types";
|
||||
import type { Page } from "./route-config";
|
||||
@@ -845,6 +849,474 @@ function Pill({
|
||||
);
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════
|
||||
模特图方案对比 Demo(纯静态展示 · 像素还原)
|
||||
variant="A" → public/exact/model-photo-demo-a.html
|
||||
variant="B" → public/exact/model-photo-demo-b.html
|
||||
左栏 = 商品空间(搜索 + 最近 6 条 + 全部入口),由真 products 填充,空则回退基线占位。
|
||||
主区为静态方案展示(A:参数面板 + 结果双栏;B:任务流 + 底部 fixed 参数栏)。
|
||||
════════════════════════════════════════════════ */
|
||||
|
||||
/* 基线左栏占位商品(无真 products 时兜底) */
|
||||
const DEMO_SIDE_PRODUCTS = [
|
||||
{ id: "d1", title: "透真补水面膜", category: "美妆个护", batches: 6 },
|
||||
{ id: "d2", title: "透真清透防晒霜", category: "美妆个护", batches: 3 },
|
||||
{ id: "d3", title: "南卡 Lite Pro 蓝牙耳机", category: "数码 3C", batches: 2 },
|
||||
{ id: "d4", title: "滋啦速食牛肉面", category: "食品饮料", batches: 1 },
|
||||
{ id: "d5", title: "三顿半同款冻干咖啡", category: "食品饮料", batches: 1 },
|
||||
{ id: "d6", title: "小熊 4L 可视空气炸锅", category: "家居家电", batches: 0 }
|
||||
];
|
||||
|
||||
export function ModelPhotoDemoPage({ variant, products, onBack }: { variant: "A" | "B"; products: Product[]; onBack: () => void }) {
|
||||
return <><div className="page-head"><div><h1>模特图方案 {variant}</h1><div className="sub"><span className="mono">// model-photo-demo-{variant.toLowerCase()}</span> · 原型对比页补齐</div></div><div className="actions"><button className="btn" type="button" onClick={onBack}><ArrowLeft size={13} />返回模特图</button></div></div><div className={`demo-layout demo-${variant.toLowerCase()}`}><aside className="tool-rail"><div className="rail-h">商品空间</div>{products.slice(0, 6).map((product) => <button className="rail-product" type="button" key={product.id}><div className="placeholder"><span className="ph-frame">{product.title.slice(0, 4)}</span></div><span>{product.title}</span></button>)}</aside><section className="pane"><div className="pane-h"><strong>方案 {variant}</strong><span className="spacer" /><span className="mono muted-2">DEMO</span></div><div className="result-board dense">{Array.from({ length: 6 }).map((_, index) => <div className="result-tile" key={index}><div className="placeholder"><span className="ph-frame">MODEL {index + 1}</span></div></div>)}</div></section></div></>;
|
||||
// 左栏商品空间:优先真 products(最近 6 条),空则回退基线占位
|
||||
const sideProducts =
|
||||
products.length > 0
|
||||
? products.slice(0, 6).map((item, index) => ({
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
category: item.category || "未分类",
|
||||
batches: DEMO_SIDE_PRODUCTS[index % DEMO_SIDE_PRODUCTS.length].batches
|
||||
}))
|
||||
: DEMO_SIDE_PRODUCTS;
|
||||
|
||||
const [activeId, setActiveId] = useState(sideProducts[0].id);
|
||||
const active = sideProducts.find((item) => item.id === activeId) || sideProducts[0];
|
||||
const totalCount = products.length > 0 ? products.length : 24;
|
||||
|
||||
// 共享左栏(两版一致)
|
||||
const side = (
|
||||
<aside className="dm-side">
|
||||
<div className="dm-side-h">
|
||||
<div className="ti-row">
|
||||
<span className="ti">商品空间</span>
|
||||
<button className="add" type="button" title="新建商品">
|
||||
<Plus size={11} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dm-search">
|
||||
<Search size={13} />
|
||||
<input type="text" placeholder="搜索商品 / 分类" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dm-prod-list">
|
||||
{sideProducts.map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={item.id}
|
||||
className={`dm-prod ${item.id === active.id ? "active" : ""}`}
|
||||
onClick={() => setActiveId(item.id)}
|
||||
>
|
||||
<div className="thumb">主图</div>
|
||||
<div className="body">
|
||||
<div className="nm">{item.title}</div>
|
||||
<div className="sub">// {item.category} · {item.batches} 批</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="dm-all" type="button">
|
||||
<LayoutGrid size={12} />
|
||||
全部商品
|
||||
<span className="ct">{totalCount} 个</span>
|
||||
<ArrowRight className="arrow" size={12} />
|
||||
</button>
|
||||
</aside>
|
||||
);
|
||||
|
||||
// ── 返回(基线无,挂在主区头部,保留 onBack)──
|
||||
const backBtn = (
|
||||
<button className="dm-back" type="button" onClick={onBack}>
|
||||
<ArrowLeft size={14} />
|
||||
返回模特图
|
||||
</button>
|
||||
);
|
||||
|
||||
if (variant === "A") {
|
||||
return (
|
||||
<div className="model-demo dm-a">
|
||||
<div className="dm-banner">
|
||||
// DEMO · 方案 A · <b>商品 = 项目空间</b>。左栏仅商品空间:搜索 + 最近 6 条 + <b>全部商品</b>兜底入口;
|
||||
历史任务已挪进主区。主区:模特卡 + 张数 + 比例 + 立即生成,生成结果自动绑定到当前商品。
|
||||
</div>
|
||||
|
||||
<div className="dm-grid">
|
||||
{side}
|
||||
|
||||
<section className="dm-main">
|
||||
{/* 顶部 · 商品名 + 统计 */}
|
||||
<div className="dm-main-h">
|
||||
<div className="cur">
|
||||
<div className="crumb">// 商品空间</div>
|
||||
<h2>{active.title}</h2>
|
||||
</div>
|
||||
<div className="stats">
|
||||
<span>本商品 <b>6</b> 批</span>
|
||||
<span className="sep">·</span>
|
||||
<span>累计 <b>22</b> 张图</span>
|
||||
<span className="sep">·</span>
|
||||
<span>最近 <b>3 分钟前</b></span>
|
||||
</div>
|
||||
{backBtn}
|
||||
</div>
|
||||
|
||||
{/* 参数面板 + 结果双栏 */}
|
||||
<div className="dm-body">
|
||||
{/* 左 · 参数面板 */}
|
||||
<div className="dm-form">
|
||||
<div className="dm-form-scroll">
|
||||
<div className="dm-field">
|
||||
<div className="dm-field-h">
|
||||
选择模特<span className="opt">(已锁定商品 · {active.title})</span>
|
||||
</div>
|
||||
<div className="dm-models">
|
||||
{["Ava", "Zoe", "Ben", "Lin", "Mia"].map((name, index) => (
|
||||
<div className={`dm-model ${index === 0 ? "selected" : ""}`} key={name}>
|
||||
<div className="ph">{name} · 3:4</div>
|
||||
<div className="nm">{name}</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="dm-model add">
|
||||
<Plus size={18} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dm-field">
|
||||
<div className="dm-field-h">生成张数</div>
|
||||
<div className="dm-chip-row">
|
||||
{["1 张", "2 张", "4 张", "8 张"].map((label) => (
|
||||
<button type="button" key={label} className={`dm-chip ${label === "4 张" ? "active" : ""}`}>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dm-field">
|
||||
<div className="dm-field-h">画面比例</div>
|
||||
<div className="dm-chip-row">
|
||||
{["1:1", "3:4", "9:16", "16:9"].map((label) => (
|
||||
<button type="button" key={label} className={`dm-chip ${label === "3:4" ? "active" : ""}`}>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dm-field">
|
||||
<div className="dm-field-h">补充提示词<span className="opt">(选填)</span></div>
|
||||
<textarea className="dm-textarea" placeholder="例:户外阳光、敷面膜的特写、白底产品摄影" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dm-form-cta">
|
||||
<div className="dm-cost">
|
||||
<span>预估扣费 <span className="v">≈ ¥1.20</span></span>
|
||||
<span>余额 ¥327.40</span>
|
||||
</div>
|
||||
<button className="dm-gen" type="button">
|
||||
<Sparkles size={15} />
|
||||
立即生成 · {active.title} × Ava
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右 · 结果(当前商品全部批次) */}
|
||||
<div className="dm-result">
|
||||
<div className="dm-result-h">
|
||||
<span className="ti">最近批次 · Ava × 4 张</span>
|
||||
<span className="sub">// 3 分钟前 · 已完成</span>
|
||||
</div>
|
||||
|
||||
{/* 批次 1 */}
|
||||
<div className="dm-batch">
|
||||
<div className="dm-batch-h">
|
||||
<div className="pic">4×</div>
|
||||
<div className="meta">
|
||||
<div className="nm">Ava × 4 张</div>
|
||||
<div className="info">
|
||||
{active.title} <span className="sep">·</span> 3:4 <span className="sep">·</span> 3 分钟前{" "}
|
||||
<span className="sep">·</span> ¥1.20
|
||||
</div>
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑"><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载"><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库"><Bookmark size={13} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
<div className="dm-cell" key={n}>
|
||||
<div className="ph">Ava · #{n}</div>
|
||||
<span className="tag">3:4</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 批次 2 */}
|
||||
<div className="dm-batch">
|
||||
<div className="dm-batch-h">
|
||||
<div className="pic">4×</div>
|
||||
<div className="meta">
|
||||
<div className="nm">Zoe × 4 张</div>
|
||||
<div className="info">
|
||||
{active.title} <span className="sep">·</span> 3:4 <span className="sep">·</span> 12 分钟前{" "}
|
||||
<span className="sep">·</span> ¥1.20
|
||||
</div>
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑"><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载"><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库"><Bookmark size={13} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
<div className="dm-cell" key={n}>
|
||||
<div className="ph">Zoe · #{n}</div>
|
||||
<span className="tag">3:4</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 批次 3 · 生成中 */}
|
||||
<div className="dm-batch">
|
||||
<div className="dm-batch-h">
|
||||
<div className="pic">2×</div>
|
||||
<div className="meta">
|
||||
<div className="nm">Ben × 2 张</div>
|
||||
<div className="info">
|
||||
{active.title} <span className="sep">·</span> 3:4 <span className="sep">·</span> 刚刚{" "}
|
||||
<span className="sep">·</span> 生成中
|
||||
</div>
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="取消"><X size={13} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
<div className="dm-cell"><div className="ph">生成中…</div></div>
|
||||
<div className="dm-cell"><div className="ph">生成中…</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── variant === "B" · v2:任务流主区 + 底部 fixed 参数栏 ──
|
||||
return (
|
||||
<div className="model-demo dm-b">
|
||||
<div className="dm-banner">
|
||||
// DEMO v2 · 方案 A · <b>商品空间 + 任务流主区</b>。左栏只保留商品空间(搜索+最近6条+全部入口),
|
||||
任务列表搬到主区,筛选放主区顶部 toolbar,参数面板底部 fixed 化(类 image-optimize)。
|
||||
</div>
|
||||
|
||||
<div className="dm-grid">
|
||||
{side}
|
||||
|
||||
<section className="dm-main">
|
||||
{/* 顶部 标题 + stats + toolbar */}
|
||||
<div className="dm-main-h">
|
||||
<div className="crumb">// 商品空间 · 模特上身图</div>
|
||||
<div className="title-row">
|
||||
<h2>{active.title}</h2>
|
||||
{backBtn}
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="stats">
|
||||
<span>{active.category}</span><span className="sep">·</span>
|
||||
<span>本商品 <b>6</b> 批</span><span className="sep">·</span>
|
||||
<span>累计 <b>22</b> 张图</span><span className="sep">·</span>
|
||||
<span>最近 <b>3 分钟前</b></span>
|
||||
</div>
|
||||
<span className="spacer" />
|
||||
<div className="dm-tb">
|
||||
<button className="icbtn" type="button" title="搜索批次"><Search size={13} /></button>
|
||||
<button className="chip" type="button">时间 <ChevronDown size={10} /></button>
|
||||
<button className="chip" type="button">状态 <ChevronDown size={10} /></button>
|
||||
<button className="chip" type="button">模特 <ChevronDown size={10} /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 任务流 */}
|
||||
<div className="dm-stream">
|
||||
<div className="dm-day-h">
|
||||
<span>今天</span>
|
||||
<span className="ct">3 批 · 10 张</span>
|
||||
</div>
|
||||
|
||||
{/* 批次 1 */}
|
||||
<div className="dm-batch">
|
||||
<div className="dm-batch-h">
|
||||
<div className="pic">4×</div>
|
||||
<div className="meta">
|
||||
<div className="nm">Ava × 4 张 <span className="pill ok stat-pill"><span className="dot" />已完成</span></div>
|
||||
<div className="info">
|
||||
<span>3:4</span><span className="sep">·</span>
|
||||
<span>3 分钟前</span><span className="sep">·</span>
|
||||
<span>¥1.20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑"><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载"><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库"><Bookmark size={13} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
<div className="dm-cell" key={n}><div className="ph">Ava · #{n}</div><span className="tag">3:4</span></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 批次 2 */}
|
||||
<div className="dm-batch">
|
||||
<div className="dm-batch-h">
|
||||
<div className="pic">4×</div>
|
||||
<div className="meta">
|
||||
<div className="nm">Zoe × 4 张 <span className="pill ok stat-pill"><span className="dot" />已完成</span></div>
|
||||
<div className="info">
|
||||
<span>3:4</span><span className="sep">·</span>
|
||||
<span>12 分钟前</span><span className="sep">·</span>
|
||||
<span>¥1.20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑"><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载"><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库"><Bookmark size={13} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
<div className="dm-cell" key={n}><div className="ph">Zoe · #{n}</div><span className="tag">3:4</span></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 批次 3 · 生成中 */}
|
||||
<div className="dm-batch">
|
||||
<div className="dm-batch-h">
|
||||
<div className="pic">2×</div>
|
||||
<div className="meta">
|
||||
<div className="nm">Ben × 2 张 <span className="pill info stat-pill"><span className="dot" />生成中</span></div>
|
||||
<div className="info">
|
||||
<span>3:4</span><span className="sep">·</span>
|
||||
<span>刚刚</span><span className="sep">·</span>
|
||||
<span>¥0.60</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="取消"><X size={13} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
<div className="dm-cell gen"><div className="ph">生成中…</div></div>
|
||||
<div className="dm-cell gen"><div className="ph">生成中…</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 昨天 */}
|
||||
<div className="dm-day-h">
|
||||
<span>昨天</span>
|
||||
<span className="ct">2 批 · 8 张</span>
|
||||
</div>
|
||||
|
||||
<div className="dm-batch">
|
||||
<div className="dm-batch-h">
|
||||
<div className="pic">4×</div>
|
||||
<div className="meta">
|
||||
<div className="nm">Lin × 4 张 <span className="pill ok stat-pill"><span className="dot" />已完成</span></div>
|
||||
<div className="info">
|
||||
<span>3:4</span><span className="sep">·</span>
|
||||
<span>昨天 18:24</span><span className="sep">·</span>
|
||||
<span>¥1.20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑"><RefreshCw size={13} /></button>
|
||||
<button type="button" title="全部下载"><Download size={13} /></button>
|
||||
<button type="button" title="加入资产库"><Bookmark size={13} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
{[1, 2, 3, 4].map((n) => (
|
||||
<div className="dm-cell" key={n}><div className="ph">Lin · #{n}</div><span className="tag">3:4</span></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 更早 */}
|
||||
<div className="dm-day-h">
|
||||
<span>更早</span>
|
||||
<span className="ct">1 批 · 2 张 · 含 1 失败</span>
|
||||
</div>
|
||||
|
||||
<div className="dm-batch">
|
||||
<div className="dm-batch-h">
|
||||
<div className="pic">2×</div>
|
||||
<div className="meta">
|
||||
<div className="nm">Ava × 2 张 <span className="pill err stat-pill"><span className="dot" />失败</span></div>
|
||||
<div className="info">
|
||||
<span>3:4</span><span className="sep">·</span>
|
||||
<span>2 天前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ops">
|
||||
<button type="button" title="全部重跑"><RefreshCw size={13} /></button>
|
||||
<button type="button" title="删除"><Trash2 size={13} /></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dm-batch-grid">
|
||||
<div className="dm-cell err"><div className="ph">失败 · 点重跑</div></div>
|
||||
<div className="dm-cell err"><div className="ph">失败 · 点重跑</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部 fixed 参数面板 */}
|
||||
<div className="dm-param-wrap">
|
||||
<div className="dm-param">
|
||||
<button className="pchip active" type="button">
|
||||
<span className="lbl-mono">模特</span>
|
||||
<span>Ava</span>
|
||||
<ChevronDown size={10} />
|
||||
</button>
|
||||
<button className="pchip" type="button">
|
||||
<span className="lbl-mono">张数</span>
|
||||
<span>4</span>
|
||||
<ChevronDown size={10} />
|
||||
</button>
|
||||
<button className="pchip" type="button">
|
||||
<span className="lbl-mono">比例</span>
|
||||
<span>3:4</span>
|
||||
<ChevronDown size={10} />
|
||||
</button>
|
||||
<button className="pchip" type="button">
|
||||
<span className="lbl-mono">补充提示词</span>
|
||||
<span className="muted">+ 添加</span>
|
||||
</button>
|
||||
<span className="spacer" />
|
||||
<span className="meta-right">预估 <span className="v">¥1.20</span> · 余额 <span className="v">¥327.40</span></span>
|
||||
<button className="gen-btn" type="button">
|
||||
<Sparkles size={14} />
|
||||
生成 · {active.title} × Ava
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user