fix(core): 测试清单 行16-33 — 商品详情/视频项目/新建向导/图片生成 批量修复

商品库+详情(行16-23):AI素材空状态缺省页;三视图16:9+版本历史切换+采用按钮;
详情「生成视频」预勾选商品、快捷生成图带入商品;管理商品编辑态保留底部统计;
删除商品 icon+DELETE ITEM 文案、乐观删除防重复点击;卡片图铺满占位区。

视频项目+新建向导(行24-28):筛选脚本来源按真实数据渲染;新建项目内「创建新商品」
右侧抽屉+创建后自动选中;开始栏 sticky 常驻;默认选中商品即显示卖点、未填完禁用开始;
去掉脚本风格/人物设定区块。

图片生成工作台(行29-33):模特单选;生成中改 spinner 动态图标+按钮间距;多任务并行;
重跑追加批次而非覆盖+更多按钮 hover 气泡菜单+「加入资产库/取消」切换与提示弹窗;
多批次本地持久化恢复。

收尾:App.tsx 接 initialProductId/preselectProductId/onCreateProduct/onAdoptTriView;
全局 toast 自动消失(成功3s/错误5s)修复行17③/22「右上角提示一直挂着」。

tsc -b && vite build 通过。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

core/frontend/src/ai-tools-page.css

@@ -719,6 +719,84 @@
   0%, 100% { opacity: 1; }
   50%      { opacity: .55; }
 }
+/* 行30:生成中占位 · 旋转 spinner icon(替代「生成中…」文字) */
+.image-workbench .gen-image .gen-loading {
+  display: grid; place-items: center;
+}
+.image-workbench .gen-image .gen-loading .spinner {
+  width: 24px; height: 24px;
+}
+
+/* ════════════════════════════════════════════════
+   行31/32/33 · 批次卡 + 气泡菜单
+   ════════════════════════════════════════════════ */
+/* 批次卡:复用 .gen-card,批次间拉开间距 */
+.image-workbench .gen-batch-card + .gen-batch-card { margin-top: 18px; }
+/* 批次头(数量 + 状态) */
+.image-workbench .gen-batch-h {
+  display: flex; align-items: center; gap: 10px;
+}
+.image-workbench .gen-batch-h .b-pic {
+  flex-shrink: 0;
+  width: 28px; height: 28px;
+  background: var(--background-lighter);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-sm);
+  display: grid; place-items: center;
+  color: var(--heat);
+  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
+}
+.image-workbench .gen-batch-h .b-meta { flex: 1; min-width: 0; }
+.image-workbench .gen-batch-h .b-nm { font-size: 13px; font-weight: 600; color: var(--accent-black); }
+.image-workbench .gen-batch-h .b-info {
+  margin-top: 2px;
+  font-family: var(--font-mono); font-size: 12px;
+  color: var(--black-alpha-48); letter-spacing: .02em;
+}
+/* 行30:批次底部操作行 · 与上方图片网格拉开间距(原 .gen-card-actions 仅 4px,过小) */
+.image-workbench .gen-batch-actions {
+  display: flex; align-items: center; gap: 8px;
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border-faint);
+}
+
+/* 行32③ · 单图「更多」气泡 + 批次底部「更多」气泡(hover 展开) */
+.image-workbench .gen-img-more,
+.image-workbench .gen-batch-more { position: relative; display: inline-flex; }
+.image-workbench .gen-bubble {
+  position: absolute; top: calc(100% + 6px); right: 0;
+  min-width: 168px;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-md);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
+  padding: 4px;
+  display: none;
+  z-index: 40;
+}
+/* 批次底部气泡向上弹出(底部空间不足) */
+.image-workbench .gen-bubble.gen-bubble-up { top: auto; bottom: calc(100% + 6px); }
+.image-workbench .gen-img-more:hover .gen-bubble,
+.image-workbench .gen-img-more:focus-within .gen-bubble,
+.image-workbench .gen-batch-more:hover .gen-bubble,
+.image-workbench .gen-batch-more:focus-within .gen-bubble { display: block; }
+.image-workbench .gen-bubble-item {
+  width: 100%;
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 10px;
+  border: 0; border-radius: var(--r-sm);
+  background: transparent;
+  font-size: 13px; color: var(--accent-black);
+  font-family: inherit; text-align: left; cursor: pointer;
+  transition: background var(--t-base), color var(--t-base);
+}
+.image-workbench .gen-bubble-item svg { width: 13px; height: 13px; flex-shrink: 0; }
+.image-workbench .gen-bubble-item:hover { background: var(--background-lighter); }
+.image-workbench .gen-bubble-item.danger { color: var(--accent-crimson); }
+.image-workbench .gen-bubble-item.danger:hover { background: var(--crimson-bg); }
+.image-workbench .gen-bubble-item:disabled { color: var(--black-alpha-32); cursor: not-allowed; }
+.image-workbench .gen-bubble-item:disabled:hover { background: transparent; }
 
 /* ════════════════════════════════════════════════
    mode=image · 对话流形态(基线 image-optimize.html · design.md §4.13)