feat(core/frontend): ai-tools per-mode layouts (image=chat-stream / model=person picker / cover=platform) + pipeline real unread bell

- ImageWorkbenchPage now renders mode-specific layouts matching each baseline:
  image -> chat-stream (conversation list + hero + prompt chips + chat input bar);
  model -> product rail + 真人模特 cards (assets category=person, fallback Ava/Luna/Mia/Zoe) + per-model count;
  cover -> platform-kit picker. Generation (onGenerate) wiring + loading/empty/fail states preserved.
- pipeline.tsx: bespoke topbar bell now shows real unreadCount (was hardcoded 12); App.tsx threads it.
verified: tsc --noEmit clean; screenshot confirms image-optimize matches chat-stream baseline.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

core/frontend/src/routes/ai-tools.tsx

@@ -3,13 +3,17 @@ import {
   ArrowLeft,
   ArrowRight,
   Check,
+  ChevronDown,
   Download,
   Grid2X2,
+  ImagePlus,
   List,
   MoreHorizontal,
+  Plus,
   Quote,
   RefreshCw,
   Search,
+  Sparkles,
   WandSparkles
 } from "lucide-react";
 import type { AITask, Asset, ModelConfig, Product } from "../types";
@@ -221,8 +225,6 @@ const MODE_META: Record<
     tag: string;
     desc: string;
     ratio: string;
-    ratioVar: string;
-    pickStep?: { num: string; title: string; sub: string; kind: "model" | "platform" };
     promptTemplate: (productTitle: string) => string;
   }
 > = {
@@ -231,7 +233,6 @@ const MODE_META: Record<
     tag: "[ IMAGE · STUDIO ]",
     desc: "自由创作 AI 图片，适用于详情图 / 海报 / 灵感速写。",
     ratio: "1:1",
-    ratioVar: "1 / 1",
     promptTemplate: (title) => `${title}，电商高转化视觉，干净背景，商品主体清晰`
   },
   model: {
@@ -239,8 +240,6 @@ const MODE_META: Record<
     tag: "[ MODEL · TRY-ON ]",
     desc: "选择模特和商品，生成电商模特上身图。",
     ratio: "3:4",
-    ratioVar: "3 / 4",
-    pickStep: { num: "2", title: "选择模特", sub: "// 可多选 · 一次生成多套", kind: "model" },
     promptTemplate: (title) => `${title}，模特上身展示，自然光，真实质感，电商主图`
   },
   cover: {
@@ -248,21 +247,54 @@ const MODE_META: Record<
     tag: "[ PLATFORM · KIT ]",
     desc: "选择平台模板，一键生成主图 / 封面 / 详情套图。",
     ratio: "4:5",
-    ratioVar: "4 / 5",
-    pickStep: { num: "2", title: "选择平台", sub: "// 多选平台 · 自动套版", kind: "platform" },
     promptTemplate: (title) => `${title}，电商平台套图，统一视觉，主图 + 详情排版`
   }
 };
 
 const RATIO_OPTIONS = ["1:1", "3:4", "4:5", "9:16", "16:9"];
 const COUNT_OPTIONS = ["1", "2", "4"];
+const MODEL_RATIO_OPTIONS = ["1:1", "3:4", "9:16"];
+const MODEL_COUNT_OPTIONS = ["4", "8", "12"];
+const COVER_COUNT_OPTIONS = ["4", "8", "12"];
+
+/* 图片创作 · 空态提示词建议 chip(基线 image-optimize EXAMPLES) */
+const IMAGE_SUGGESTIONS = [
+  "一只穿着宇航服的橘猫，漂浮在霓虹色星云中，赛博朋克风",
+  "极简北欧风格的茶杯，白底，自然柔光，产品摄影",
+  "国风水墨海报，主体一只白鹤立于水边，留白构图",
+  "电影感都市夜景，街道湿漉漉反射霓虹，4K 高清"
+];
+
+/* 图片创作 · 风格胶囊(基线 image-optimize STYLES) */
+const STYLE_OPTIONS = [
+  { id: "auto", label: "默认" },
+  { id: "realistic", label: "写实" },
+  { id: "cinematic", label: "电影感" },
+  { id: "anime", label: "动漫" },
+  { id: "oil", label: "油画" },
+  { id: "cn-ink", label: "国风水墨" }
+];
+
+/* 模特上身图 · 真人模特默认占位卡(基线 model-photo Ava/Luna/Mia/Zoe) */
+const FALLBACK_MODELS = [
+  { id: "m1", name: "Ava", tag: "亚洲·25岁·清新" },
+  { id: "m2", name: "Luna", tag: "亚洲·22岁·学生" },
+  { id: "m3", name: "Mia", tag: "混血·28岁·OL" },
+  { id: "m4", name: "Zoe", tag: "亚洲·30岁·健身" }
+];
+
+/* 平台套图 · 平台卡(基线 platform-cover · logo 配色用 token 化 className) */
 const PLATFORM_OPTIONS = [
-  { id: "tb", name: "淘宝" },
-  { id: "dy", name: "抖音" },
-  { id: "xhs", name: "小红书" },
-  { id: "pdd", name: "拼多多" },
-  { id: "jd", name: "京东" },
-  { id: "ks", name: "快手" }
+  { id: "dy", name: "抖音电商", logo: "抖" },
+  { id: "tb", name: "淘宝", logo: "淘" },
+  { id: "tm", name: "天猫", logo: "猫" },
+  { id: "jd", name: "京东", logo: "京" },
+  { id: "pdd", name: "拼多多", logo: "拼" },
+  { id: "xhs", name: "小红书", logo: "红" },
+  { id: "ks", name: "快手", logo: "快" },
+  { id: "sph", name: "视频号", logo: "视" },
+  { id: "amz", name: "亚马逊", logo: "a" },
+  { id: "al", name: "1688", logo: "阿" }
 ];
 
 export function ImageWorkbenchPage({
@@ -287,13 +319,17 @@ export function ImageWorkbenchPage({
   const product = products.find((item) => item.id === productId) || products[0];
   const [prompt, setPrompt] = useState(meta.promptTemplate(products[0]?.title || "商品"));
   const [ratio, setRatio] = useState(meta.ratio);
-  const [count, setCount] = useState("4");
+  const [style, setStyle] = useState("auto");
+  const [count, setCount] = useState(mode === "image" ? "4" : "4");
   const [pickedIds, setPickedIds] = useState<string[]>([]);
   const [generating, setGenerating] = useState(false);
   const [results, setResults] = useState<Asset[] | null>(null);
 
   const imageModels = modelConfigs.filter((model) => model.capability.includes("image"));
-  const modelOptions = useMemo(() => modelConfigs.slice(0, 6), [modelConfigs]);
+
+  /* 模特卡数据来源:assets 中 category==='person' 的真资产(显真图 preview_url + name);
+     无则回退到基线占位模特卡 Ava/Luna/Mia/Zoe */
+  const personAssets = useMemo(() => assets.filter((item) => item.category === "person"), [assets]);
 
   useEffect(() => {
     if (product) setPrompt(meta.promptTemplate(product.title));
@@ -322,42 +358,212 @@ export function ImageWorkbenchPage({
     }
   }
 
-  return (
-    <div className="image-workbench">
-      {/* 顶栏 · 返回 + mode 标题 + 主操作 */}
-      <div className="iw-topbar">
-        <button className="back-pill" type="button" onClick={onBack}>
-          <ArrowLeft size={14} />
-          返回
-        </button>
-        <div className="iw-title">
-          <h1>{meta.title}</h1>
-          <div className="sub">
-            <span className="mono">{meta.tag}</span>
-            <span>{meta.desc}</span>
-          </div>
-        </div>
-        <span className="spacer" />
-        {mode === "model" && navigate && (
-          <button className="btn" type="button" onClick={() => navigate("modelPhotoDemoA")}>
-            方案 A
-          </button>
-        )}
-        <button className="btn btn-primary" type="button" onClick={runGenerate} disabled={!canGenerate}>
-          {generating ? <span className="spinner" aria-hidden /> : <WandSparkles size={13} />}
-          {generating ? "生成中…" : "生成图片"}
-        </button>
-      </div>
+  const hasResults = !!(results && results.length > 0);
 
+  /* ── 共享:生成结果网格(§4.18 .gen-card · 三 mode 统一渲染真图)── */
+  function renderResultGrid() {
+    const cols = (results?.length ?? candidateCount) >= 4 ? 4 : 2;
+    return (
+      <div
+        className="gen-images"
+        style={{ "--cols": cols, "--ratio": ratioVar } as React.CSSProperties}
+      >
+        {(hasResults
+          ? results!.map((asset, index) => ({ key: asset.id, index, url: asset.files?.[0]?.preview_url }))
+          : Array.from({ length: candidateCount }).map((_, index) => ({ key: `ph-${index}`, index, url: undefined as string | undefined }))
+        ).map(({ key, index, url }) => (
+          <div className={`gen-image ${generating && !url ? "gen" : ""}`} key={key}>
+            {url ? (
+              <img className="gen-image-img" src={url} alt={`${meta.title} #${index + 1}`} loading="lazy" />
+            ) : (
+              <div className="placeholder">
+                <span className="ph-frame">
+                  {generating ? "生成中…" : `${ratio} · #${index + 1}`}
+                </span>
+              </div>
+            )}
+            <div className="gen-image-actions">
+              <button className="gen-img-btn" type="button" title="重跑">
+                <RefreshCw size={14} />
+              </button>
+              <button className="gen-img-btn" type="button" title="下载">
+                <Download size={14} />
+              </button>
+              <button className="gen-img-btn" type="button" title="更多">
+                <MoreHorizontal size={14} />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  /* ════════════════════════════════════════════════
+     mode === "image" → 对话流形态(基线 image-optimize · design.md §4.13)
+     左会话列表 + 中央 hero/对话流 + 底部 chat 输入栏
+     ════════════════════════════════════════════════ */
+  if (mode === "image") {
+    return (
+      <div className="image-workbench iw-chat">
+        {/* 左 · 会话列表 */}
+        <aside className="ic-side">
+          <div className="ic-side-h">
+            <button className="back-pill" type="button" onClick={onBack}>
+              <ArrowLeft size={14} />
+              返回
+            </button>
+          </div>
+          <button className="ic-new-conv" type="button">
+            <Plus size={13} />
+            新对话
+          </button>
+          <div className="ic-side-sec">默认</div>
+          <div className="ic-conv-list">
+            <div className="ic-conv-item active">
+              <div className="thumb default">
+                <ImagePlus size={13} />
+              </div>
+              <span className="nm">默认创作</span>
+            </div>
+          </div>
+          <div className="ic-side-sec">最近</div>
+          <div className="ic-conv-list">
+            <div className="ic-conv-empty">
+              还没有最近会话
+              <br />
+              <span className="mono">// NO HISTORY</span>
+            </div>
+          </div>
+        </aside>
+
+        {/* 右 · 对话流 + 底部输入栏 */}
+        <section className="ic-main">
+          <div className="ic-stream">
+            {hasResults ? (
+              <div className="ic-stream-inner">
+                <div className="ic-msg">
+                  <div className="ic-msg-prompt">
+                    <span className="quote">
+                      <Quote size={13} />
+                    </span>
+                    <div className="pt">
+                      <div className="pt-text">{prompt}</div>
+                      <div className="pt-tags">
+                        <span className="meta-chip">{ratio}</span>
+                        <span className="sep">·</span>
+                        <span className="meta-chip">{count} 张</span>
+                        <span className="sep">·</span>
+                        <span className="meta-chip">{STYLE_OPTIONS.find((s) => s.id === style)?.label || "默认"}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="gen-card">{renderResultGrid()}</div>
+                  <div className="gen-card-actions">
+                    <button className="btn btn-sm" type="button">
+                      <RefreshCw size={13} />
+                      重新编辑
+                    </button>
+                    <button className="btn btn-sm" type="button">
+                      <Check size={13} />
+                      全部加入资产库
+                    </button>
+                    <button className="btn btn-sm btn-ghost" type="button" title="更多">
+                      <MoreHorizontal size={13} />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="ic-empty">
+                <div className="ic">
+                  <Sparkles size={28} />
+                </div>
+                <div className="badge">// IMAGE · STUDIO</div>
+                <h2>开始你的创作</h2>
+                <p>输入想法、剧本或上传参考，和 Agent 一起把灵感变成电商视觉素材。</p>
+                <div className="examples">
+                  {IMAGE_SUGGESTIONS.map((text) => (
+                    <button className="ex" type="button" key={text} onClick={() => setPrompt(text)}>
+                      {text}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 底部 · chat 输入栏(textarea + 比例/风格/张数 + 发送) */}
+          <div className="ic-input-wrap">
+            <div className="ic-input">
+              <div className="ic-input-top">
+                <button className="add-btn" type="button" title="上传参考图">
+                  <Plus size={22} />
+                </button>
+              </div>
+              <textarea
+                className="ic-input-text"
+                value={prompt}
+                onChange={(event) => setPrompt(event.target.value)}
+                placeholder="输入想法、剧本或上传参考，和 Agent 一起创作"
+              />
+              <div className="ic-input-bottom">
+                <Pill
+                  label="比例"
+                  value={ratio}
+                  options={RATIO_OPTIONS.map((value) => ({ id: value, label: value }))}
+                  onSelect={setRatio}
+                />
+                <Pill
+                  label="风格"
+                  value={STYLE_OPTIONS.find((s) => s.id === style)?.label || "默认"}
+                  options={STYLE_OPTIONS}
+                  onSelect={setStyle}
+                />
+                <Pill
+                  label="张数"
+                  value={count}
+                  options={COUNT_OPTIONS.map((value) => ({ id: value, label: value }))}
+                  onSelect={setCount}
+                />
+                <span className="right-meta">
+                  预估 <span className="val">¥{(candidateCount * 0.1).toFixed(2)}</span>
+                </span>
+                <button className="send-btn" type="button" onClick={runGenerate} disabled={!canGenerate} title="生成">
+                  {generating ? <span className="spinner" aria-hidden /> : <ArrowRight size={15} />}
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    );
+  }
+
+  /* ════════════════════════════════════════════════
+     mode === "model" / "cover" → 商品列表栏 + 表单 + 预览
+     (基线 model-photo / platform-cover)
+     ════════════════════════════════════════════════ */
+  const ratioOptions = mode === "model" ? MODEL_RATIO_OPTIONS : RATIO_OPTIONS;
+  const countOptions = mode === "model" ? MODEL_COUNT_OPTIONS : COVER_COUNT_OPTIONS;
+
+  return (
+    <div className="image-workbench iw-prod">
       <div className="iw-layout">
         {/* 最左 · 商品空间 */}
         <aside className="iw-prod-space">
-          <div className="iw-ps-h">
-            <span className="mono">商品空间</span>
+          <div className="iw-side-top">
+            <button className="back-pill" type="button" onClick={onBack}>
+              <ArrowLeft size={14} />
+              返回
+            </button>
           </div>
           <div className="iw-ps-search">
             <Search size={13} />
-            <input placeholder="搜索商品" />
+            <input placeholder="搜索商品 / 分类" />
+          </div>
+          <div className="iw-list-h">
+            <span className="mono">// 商品空间</span>
           </div>
           <div className="iw-ps-list">
             {products.length === 0 ? (
@@ -387,211 +593,258 @@ export function ImageWorkbenchPage({
           </div>
         </aside>
 
-        {/* 中 · 参数表单 */}
-        <section className="iw-form">
-          <div className="iw-step">
-            <div className="iw-step-h">
-              <span className="num">1</span>
-              <span className="title">商品与提示词</span>
+        {/* 主区 · 头部 + 参数/结果双栏 */}
+        <section className="iw-main">
+          <div className="iw-main-h">
+            <div className="cur-title">
+              <span className="crumb">// 商品空间</span>
+              <span className={`nm ${product ? "" : "placeholder"}`}>
+                {product?.title || "未选择 · 请在左侧商品空间选一个"}
+              </span>
             </div>
-            <div className="iw-sub">
-              <div className="iw-sub-h">// 当前商品</div>
-              <div className="field" style={{ marginBottom: 0 }}>
-                <div className="iw-pv-line" style={{ fontSize: 13, color: "var(--accent-black)" }}>
-                  {product?.title || "未选择商品"}
-                </div>
-              </div>
-            </div>
-            <div className="iw-sub">
-              <div className="iw-sub-h">// 提示词</div>
-              <textarea
-                className="textarea"
-                value={prompt}
-                onChange={(event) => setPrompt(event.target.value)}
-                placeholder="描述你想要的画面…"
-              />
-            </div>
-          </div>
-
-          {meta.pickStep && (
-            <div className="iw-step">
-              <div className="iw-step-h">
-                <span className="num">{meta.pickStep.num}</span>
-                <span className="title">{meta.pickStep.title}</span>
-              </div>
-              <div className="iw-sub-h">{meta.pickStep.sub}</div>
-              {meta.pickStep.kind === "model" ? (
-                <div className="iw-pick-grid">
-                  {(modelOptions.length ? modelOptions : products.slice(0, 4)).map((item) => {
-                    const id = "id" in item ? item.id : "";
-                    const label = "display_name" in item ? item.display_name : (item as Product).title;
-                    return (
-                      <button
-                        type="button"
-                        key={id}
-                        className={`iw-pick-card ${pickedIds.includes(id) ? "selected" : ""}`}
-                        onClick={() => togglePick(id)}
-                      >
-                        <div className="placeholder m-thumb">
-                          <span className="ph-frame">3:4</span>
-                        </div>
-                        <div className="m-name">{label}</div>
-                        <div className="m-meta">// 模特</div>
-                        <span className="m-check">
-                          <Check size={11} />
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
-              ) : (
-                <div className="iw-pick-grid platforms">
-                  {PLATFORM_OPTIONS.map((item) => (
-                    <button
-                      type="button"
-                      key={item.id}
-                      className={`iw-pick-card platforms-card ${pickedIds.includes(item.id) ? "selected" : ""}`}
-                      onClick={() => togglePick(item.id)}
-                    >
-                      <div className="m-name">{item.name}</div>
-                      <span className="m-check">
-                        <Check size={11} />
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          <div className="iw-step">
-            <div className="iw-step-h">
-              <span className="num">{meta.pickStep ? "3" : "2"}</span>
-              <span className="title">生成参数</span>
-            </div>
-            <div className="iw-sub">
-              <div className="iw-sub-h">// 比例</div>
-              <div className="pill-row">
-                {RATIO_OPTIONS.map((value) => (
-                  <button
-                    type="button"
-                    key={value}
-                    className={`opt ${ratio === value ? "active" : ""}`}
-                    onClick={() => setRatio(value)}
-                  >
-                    {value}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div className="iw-sub">
-              <div className="iw-sub-h">// 张数</div>
-              <div className="pill-row">
-                {COUNT_OPTIONS.map((value) => (
-                  <button
-                    type="button"
-                    key={value}
-                    className={`opt ${count === value ? "active" : ""}`}
-                    onClick={() => setCount(value)}
-                  >
-                    {value}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          <div className="iw-cta">
-            <button className="btn btn-primary" type="button" onClick={runGenerate} disabled={!canGenerate}>
-              {generating ? <span className="spinner" aria-hidden /> : <WandSparkles size={13} />}
-              {generating ? "生成中…" : "立即生成"}
+            <span className="spacer" />
+            <button className="search-btn" type="button" title="搜索">
+              <Search size={14} />
             </button>
-            <div className="iw-cta-hint">
-              // {imageModels[0]?.display_name || "Volcano Image"} · 预估 {meta.title}
-            </div>
-          </div>
-        </section>
-
-        {/* 右 · 结果预览 */}
-        <section className="iw-preview">
-          <div className="iw-pv-h">
-            <Quote className="quote-icon" />
-            <div className="pv-meta">
-              <b>{ratio}</b> · {count} 张 · {imageModels[0]?.display_name || "Volcano Image"}
-            </div>
-            <div className="pv-line">{prompt}</div>
+            {mode === "model" && navigate && (
+              <button className="tb-chip" type="button" onClick={() => navigate("modelPhotoDemoA")}>
+                方案 A
+              </button>
+            )}
           </div>
 
-          <div className="gen-card">
-            <div className="gen-meta">
-              <span>Airshelf v2</span>
-              <span className="m-sep">|</span>
-              <span>{ratio}</span>
-              <span className="m-sep">|</span>
-              <span>{product?.title || meta.title}</span>
-            </div>
-            <div
-              className="gen-images"
-              style={{ "--cols": (results?.length ?? candidateCount) >= 4 ? 4 : 2, "--ratio": ratioVar } as React.CSSProperties}
-            >
-              {(results && results.length > 0
-                ? results.map((asset, index) => ({ key: asset.id, index, url: asset.files?.[0]?.preview_url }))
-                : Array.from({ length: candidateCount }).map((_, index) => ({ key: `ph-${index}`, index, url: undefined }))
-              ).map(({ key, index, url }) => (
-                <div className="gen-image" key={key}>
-                  {url ? (
-                    <img className="gen-image-img" src={url} alt={`${meta.title} #${index + 1}`} loading="lazy" />
-                  ) : (
-                    <div className="placeholder">
-                      <span className="ph-frame">
-                        {ratio} · #{index + 1}
-                      </span>
-                    </div>
-                  )}
-                  <div className="gen-image-actions">
-                    <button className="gen-img-btn" type="button" title="重跑">
-                      <RefreshCw size={14} />
-                    </button>
-                    <button className="gen-img-btn" type="button" title="下载">
-                      <Download size={14} />
-                    </button>
-                    <button className="gen-img-btn" type="button" title="更多">
-                      <MoreHorizontal size={14} />
-                    </button>
+          <div className="iw-main-body">
+            {/* 左 · 参数表单 */}
+            <div className="iw-form">
+              {mode === "model" ? (
+                <div className="iw-step">
+                  <div className="iw-step-h">
+                    <span className="num">1</span>
+                    <span className="title">选择模特</span>
+                    <span className="right">全部模特 →</span>
+                  </div>
+                  <div className="model-grid">
+                    {personAssets.length > 0
+                      ? personAssets.slice(0, 6).map((item) => {
+                          const url = item.files?.[0]?.preview_url;
+                          return (
+                            <button
+                              type="button"
+                              key={item.id}
+                              className={`model-card ${pickedIds.includes(item.id) ? "selected" : ""}`}
+                              onClick={() => togglePick(item.id)}
+                            >
+                              <span className="m-check">
+                                <Check size={11} />
+                              </span>
+                              <div className="m-thumb">
+                                {url ? (
+                                  <img className="m-thumb-img" src={url} alt={item.name} loading="lazy" />
+                                ) : (
+                                  <div className="placeholder">
+                                    <span className="ph-frame">{item.name.slice(0, 4)}</span>
+                                  </div>
+                                )}
+                              </div>
+                              <div className="m-name">{item.name}</div>
+                              <div className="m-tag">// 真人模特</div>
+                            </button>
+                          );
+                        })
+                      : FALLBACK_MODELS.map((item) => (
+                          <button
+                            type="button"
+                            key={item.id}
+                            className={`model-card ${pickedIds.includes(item.id) ? "selected" : ""}`}
+                            onClick={() => togglePick(item.id)}
+                          >
+                            <span className="m-check">
+                              <Check size={11} />
+                            </span>
+                            <div className="placeholder m-thumb">
+                              <span className="ph-frame">{item.name}</span>
+                            </div>
+                            <div className="m-name">{item.name}</div>
+                            <div className="m-tag">{item.tag}</div>
+                          </button>
+                        ))}
                   </div>
                 </div>
-              ))}
-            </div>
-            <div className="gen-card-actions">
-              <button className="btn btn-sm" type="button">
-                <RefreshCw size={13} />
-                重跑
-              </button>
-              <button className="btn btn-sm" type="button">
-                <Check size={13} />
-                采用并入资产库
-              </button>
-              <button className="btn btn-sm btn-ghost" type="button" title="更多">
-                <MoreHorizontal size={13} />
-              </button>
-            </div>
-          </div>
+              ) : (
+                <div className="iw-step">
+                  <div className="iw-step-h">
+                    <span className="num">1</span>
+                    <span className="title">选择平台</span>
+                  </div>
+                  <div className="platform-grid">
+                    {PLATFORM_OPTIONS.map((item) => (
+                      <button
+                        type="button"
+                        key={item.id}
+                        className={`platform-card ${pickedIds.includes(item.id) ? "selected" : ""}`}
+                        onClick={() => togglePick(item.id)}
+                      >
+                        <span className="p-check" />
+                        <span className={`p-logo p-logo-${item.id}`}>{item.logo}</span>
+                        <span className="p-name">{item.name}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
 
-          {assets.length === 0 && (
-            <div className="iw-pv-empty">
-              <div className="mono">// NO RESULT YET</div>
-              <div className="title">还没有生成结果</div>
-              <div className="hint">
-                选择商品、填写提示词后点击 <b>立即生成</b>，结果会以候选卡片形式展示在这里。
+              <div className="iw-step">
+                <div className="iw-step-h">
+                  <span className="num">2</span>
+                  <span className="title">生成设置</span>
+                </div>
+                <div className="iw-sub">
+                  <div className="iw-sub-h">// 生成数量{mode === "model" ? " (每模特)" : ""}</div>
+                  <div className="pill-row">
+                    {countOptions.map((value) => (
+                      <button
+                        type="button"
+                        key={value}
+                        className={`opt ${count === value ? "active" : ""}`}
+                        onClick={() => setCount(value)}
+                      >
+                        {value} 张
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                {mode === "model" && (
+                  <div className="iw-sub">
+                    <div className="iw-sub-h">// 图片比例</div>
+                    <div className="pill-row">
+                      {ratioOptions.map((value) => (
+                        <button
+                          type="button"
+                          key={value}
+                          className={`opt ${ratio === value ? "active" : ""}`}
+                          onClick={() => setRatio(value)}
+                        >
+                          {value}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="iw-cta">
+                <button className="btn btn-primary" type="button" onClick={runGenerate} disabled={!canGenerate}>
+                  {generating ? <span className="spinner" aria-hidden /> : <WandSparkles size={13} />}
+                  {generating ? "生成中…" : `立即生成 (预估 ¥${(candidateCount * (mode === "model" ? 0.3 : 0.5)).toFixed(2)})`}
+                </button>
+                <div className="iw-cta-hint">// 采用即扣费并入对应商品 AI 素材 · 未采用不扣</div>
               </div>
             </div>
-          )}
+
+            {/* 右 · 结果预览 */}
+            <div className="iw-preview">
+              {!hasResults && !generating ? (
+                <div className="iw-pv-empty">
+                  <div className="mono">// EMPTY STATE</div>
+                  <div className="title">还没有生成结果</div>
+                  <div className="hint">
+                    先选商品、选{mode === "model" ? "模特" : "平台"}，点击 <b>立即生成</b> 后，效果图会出现在这里
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <div className="iw-pv-h">
+                    <Quote className="quote-icon" />
+                    <div className="pv-meta">
+                      <b>{count} 张</b>
+                      {mode === "model" ? ` · ${ratio}` : ""}
+                    </div>
+                    <div className="pv-line">
+                      <span className="k">商品</span>
+                      <span className="v">{product?.title || "未选择"}</span>
+                    </div>
+                    {mode === "cover" && (
+                      <div className="pv-line">
+                        <span className="k">平台</span>
+                        <span className="v">
+                          {pickedIds.length
+                            ? PLATFORM_OPTIONS.filter((p) => pickedIds.includes(p.id))
+                                .map((p) => p.name)
+                                .join("、")
+                            : "未选择"}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                  <div className="gen-card">{renderResultGrid()}</div>
+                  <div className="gen-card-actions">
+                    <button className="btn btn-sm" type="button">
+                      <RefreshCw size={13} />
+                      重跑
+                    </button>
+                    <button className="btn btn-sm" type="button">
+                      <Check size={13} />
+                      采用并入资产库
+                    </button>
+                    <button className="btn btn-sm btn-ghost" type="button" title="更多">
+                      <MoreHorizontal size={13} />
+                    </button>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
         </section>
       </div>
     </div>
   );
 }
 
+/* 底部 chat 输入栏 · 参数胶囊(基线 image-optimize .param + 下拉气泡) */
+function Pill({
+  label,
+  value,
+  options,
+  onSelect
+}: {
+  label: string;
+  value: string;
+  options: Array<{ id: string; label: string }>;
+  onSelect: (id: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div
+      className={`ic-param ${open ? "open" : ""}`}
+      tabIndex={0}
+      onBlur={() => setOpen(false)}
+    >
+      <button className="ic-param-btn" type="button" onClick={() => setOpen((prev) => !prev)}>
+        <span className="lbl-mono">{label}</span>
+        <span>{value}</span>
+        <ChevronDown size={10} />
+      </button>
+      <div className="ic-param-menu">
+        {options.map((opt) => (
+          <button
+            type="button"
+            key={opt.id}
+            className={`mi ${opt.label === value || opt.id === value ? "selected" : ""}`}
+            onMouseDown={(event) => {
+              event.preventDefault();
+              onSelect(opt.id);
+              setOpen(false);
+            }}
+          >
+            {opt.label}
+            <Check className="mi-check" size={12} />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 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></>;
 }

core/frontend/src/routes/pipeline.tsx

@@ -62,6 +62,7 @@ export function PipelinePage(props: {
   assets: Asset[];
   billing: BillingSummary | null;
   notice: Notice | null;
+  unreadCount: number;
   avatarChar: string;
   logout: () => void;
   onRefresh: () => void;
@@ -77,7 +78,7 @@ export function PipelinePage(props: {
   onSubmitExport: () => void;
 }) {
   const {
-    project, loading, navigate, user, team, products, projects, assets, billing, notice, avatarChar, logout,
+    project, loading, navigate, user, team, products, projects, assets, billing, notice, unreadCount, avatarChar, logout,
     onGenerateScript, onGenerateBaseAsset, onGenerateStoryboard, onSkipStoryboard,
     onSubmitVideo, onSubmitAllVideos, onSubmitExport
   } = props;
@@ -168,7 +169,7 @@ export function PipelinePage(props: {
             </span>
             <button className="icon-btn" type="button" onClick={() => navigate("messages")} title="消息中心">
               <IconKitSvg name="bell" />
-              <span className="count-noti">12</span>
+              {unreadCount > 0 && <span className="count-noti">{unreadCount}</span>}
             </button>
             <div className="topbar-avatar" onDoubleClick={logout} title="账户(双击退出)">
               <span>{avatarChar}</span>