feat(core): Wave 3 batch3 — 商品库视图切换/多选/素材三态 + 项目进度条/批量 + 工作台真实KPI

商品库+详情(sub-agent):网格/列表视图切换、分类筛选改多选(Set+计数徽标)、素材卡三态pill
  (接真实 review_status 循环切换)、采用版本联动素材卡状态+prepend、素材区视图/状态筛选/重置
项目列表(sub-agent):网格卡补 .prog 5段进度条+N/5、失败 pill 修返回 err(原 fail 无定义退化无色)、
  批量栏+card-check多选+批量删、镜数/时长用真实字段(缺则降级不造假)、去重复删除入口
工作台(sub-agent):KPI delta 接真实本月新建数(全量未加载则不显)、删无真实源的假delta、
  余额用真实冻结/总资金占比、日期改 mono、最近项目镜数用真实 video_segment_count

验证: tsc 0 · build 0 · 走查 视图切换/列表态/分类chip/进度条/批量勾选/KPI 全过 · 0 console error

⚠️ 真实数据缺(未造假,降级处理):非person素材无review_status初值;dashboard无月度预算/上月对比字段。移交监督。

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

core/frontend/src/routes/projects.tsx

@@ -368,8 +368,34 @@ function projBucket(project: Project) { return project.status === "completed" ?
 function projStatusLabel(project: Project) {
   return ({ draft: "脚本待生成", scripting: "脚本生成中", asseting: "基础资产生成中", storyboarding: "故事板生成中", videoing: "视频片段生成中", exporting: "导出中", completed: "已完成", failed: "失败" } as Record<string, string>)[project.status] || "进行中";
 }
-function projPillClass(project: Project) { return project.status === "completed" ? "ok" : project.status === "failed" ? "fail" : "info"; }
+// 失败态用现成 .pill.err(crimson),不存在 .pill.fail → 退化无色
+function projPillClass(project: Project) { return project.status === "completed" ? "ok" : project.status === "failed" ? "err" : "info"; }
 function projDate(project: Project) { return (project.updated_at || "").slice(0, 10); }
+// 当前脚本版本:优先已采用,否则取第一版(轻量列表序列化可能不含 segments,故全程可选链)
+function projScript(project: Project) {
+  const list = project.script_versions || [];
+  return list.find((v) => v.is_adopted) || list[0];
+}
+// 真实镜数:优先后端片段计数 / 片段数组长度;均缺时回落脚本片段数,再回落 0(不造假)
+function projShots(project: Project): number {
+  return project.video_segment_count ?? project.video_segments?.length ?? projScript(project)?.segments?.length ?? 0;
+}
+// 真实成片时长档:① 向导选的时长 id("0-15"→"0-15s") ② 脚本各镜时长求和("0-{n}s") ③ 视频片段目标时长求和 ④ 缺则空串(副标题只显示「N 镜」,不硬编码 0-60s)
+function projDurationLabel(project: Project): string {
+  const wiz = project.metadata?.wizard?.duration;
+  if (wiz) return /s$/i.test(wiz) ? wiz : `${wiz}s`;
+  const scriptSecs = (projScript(project)?.segments || []).reduce((sum, s) => sum + (s.duration_seconds || 0), 0);
+  if (scriptSecs > 0) return `0-${Math.round(scriptSecs)}s`;
+  const videoSecs = (project.video_segments || []).reduce((sum, s) => sum + (s.target_duration_seconds || 0), 0);
+  if (videoSecs > 0) return `0-${Math.round(videoSecs)}s`;
+  return "";
+}
+// 副标题:N 镜[ · 时长档](真实数据,缺时长档则只显示镜数)
+function projShotMeta(project: Project): string {
+  const shots = projShots(project);
+  const dur = projDurationLabel(project);
+  return dur ? `${shots} 镜 · ${dur}` : `${shots} 镜`;
+}
 // 复刻 mock-media coverFor:按项目名关键词映射封面图(无匹配 → 占位)
 function projCover(name: string): string {
   const t = name.replace(/\s+/g, "");
@@ -403,10 +429,22 @@ export function ProjectsPage({ products, projects, loading = false, navigate, op
   const [query, setQuery] = useState("");
   const [editMode, setEditMode] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<Project | null>(null);
+  // 批量管理:编辑态多选集合 + 批量删除确认开关。退出编辑态自动清空选择。
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [bulkDeleting, setBulkDeleting] = useState(false);
+  const [bulkConfirm, setBulkConfirm] = useState(false);
   useEffect(() => {
     document.body.classList.toggle("edit-mode", editMode);
     return () => document.body.classList.remove("edit-mode");
   }, [editMode]);
+  useEffect(() => { if (!editMode) setSelected(new Set()); }, [editMode]);
+  function toggleSelect(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  }
   const [openChip, setOpenChip] = useState<"" | "product" | "source" | "time">("");
   const [catFilter, setCatFilter] = useState("");
   const [sourceFilter, setSourceFilter] = useState<"all" | "has" | "none">("all");
@@ -478,6 +516,19 @@ export function ProjectsPage({ products, projects, loading = false, navigate, op
     setDeleteTarget(null);
   }
 
+  // 批量删除选中项目:逐个调 onDelete(App 端每删一项做一次刷新),完成后清空选择并关确认框
+  async function confirmBulkDelete() {
+    if (selected.size === 0 || bulkDeleting) return;
+    setBulkDeleting(true);
+    try {
+      for (const id of Array.from(selected)) await onDelete(id);
+      setSelected(new Set());
+      setBulkConfirm(false);
+    } finally {
+      setBulkDeleting(false);
+    }
+  }
+
   return (
     <section className="projects-page">
       <div className="page-head">
@@ -587,37 +638,40 @@ export function ProjectsPage({ products, projects, loading = false, navigate, op
             <tbody id="list-tbody">
               {pageItems.map((project) => {
                 const no = projStageNo(project);
-                const shots = project.video_segment_count ?? project.video_segments?.length ?? 4;
                 const cover = projCover(project.name);
+                const isSel = selected.has(project.id);
                 return (
-                  <tr key={project.id} data-status={projBucket(project)} data-name={project.name} onClick={() => openPipeline(project.id)}>
+                  <tr key={project.id} data-status={projBucket(project)} data-name={project.name} className={editMode && isSel ? "row-selected" : undefined} onClick={() => (editMode ? toggleSelect(project.id) : openPipeline(project.id))}>
                     <td>
                       <div className="proj-name-cell">
+                        {editMode && (
+                          <span className={`row-check${isSel ? " on" : ""}`} aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 8 7 12 13 4" /></svg></span>
+                        )}
                         <div className={`placeholder proj-thumb${cover ? " has-mock-media" : ""}`} style={cover ? projMock(cover) : undefined}><span className="ph-frame">9:16</span></div>
-                        <div><div className="proj-name">{project.name}</div><div className="proj-sub">{shots} 镜 · 0-60s</div></div>
+                        <div><div className="proj-name">{project.name}</div><div className="proj-sub">{projShotMeta(project)}</div></div>
                       </div>
                     </td>
                     <td>{productTitle(project.product)}</td>
                     <td><span className="muted">{(project.script_version_count ?? project.script_versions?.length ?? 0) > 0 ? "AI 已生成" : "暂无脚本"}</span></td>
                     <td>
                       <div className="hstack">
-                        <div className="prog">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={i < no ? "done" : i === no ? "cur" : ""} />)}</div>
+                        <div className="prog">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={project.status === "failed" && i === no ? "fail" : i < no ? "done" : i === no ? "cur" : ""} />)}</div>
                         <span className="muted-2 mono" style={{ fontSize: "12px" }}>{no}/5</span>
                       </div>
                     </td>
                     <td><span className={`pill ${projPillClass(project)}`}><span className="dot" />{projStatusLabel(project)}</span></td>
                     <td className="muted-2">{projDate(project)}</td>
                     <td>
-                      <div className="row-action">
-                        {editMode && (
-                          <a href="#" className="row-del" onClick={(event) => { event.preventDefault(); event.stopPropagation(); setDeleteTarget(project); }} title="删除项目"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" width="14" height="14"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg></a>
-                        )}
-                        <a href="#" onClick={(event) => { event.preventDefault(); event.stopPropagation(); openPipeline(project.id); }} title="继续"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 4l6 4-6 4z" fill="currentColor" /></svg></a>
-                        <span className="row-more" onClick={(event) => event.stopPropagation()}>
-                          <svg width="14" height="14" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.2" fill="currentColor" /><circle cx="8" cy="8" r="1.2" fill="currentColor" /><circle cx="13" cy="8" r="1.2" fill="currentColor" /></svg>
-                          <div className="row-more-tip"><button className="mi" type="button" onClick={(event) => { event.stopPropagation(); setDeleteTarget(project); }}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg>删除项目</button></div>
-                        </span>
-                      </div>
+                      {/* 编辑态走整行勾选 + 批量删除栏,不再显示行末单删(去重);常驻态保留 ⋯ 气泡删除 */}
+                      {!editMode && (
+                        <div className="row-action">
+                          <a href="#" onClick={(event) => { event.preventDefault(); event.stopPropagation(); openPipeline(project.id); }} title="继续"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 4l6 4-6 4z" fill="currentColor" /></svg></a>
+                          <span className="row-more" onClick={(event) => event.stopPropagation()}>
+                            <svg width="14" height="14" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.2" fill="currentColor" /><circle cx="8" cy="8" r="1.2" fill="currentColor" /><circle cx="13" cy="8" r="1.2" fill="currentColor" /></svg>
+                            <div className="row-more-tip"><button className="mi" type="button" onClick={(event) => { event.stopPropagation(); setDeleteTarget(project); }}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg>删除项目</button></div>
+                          </span>
+                        </div>
+                      )}
                     </td>
                   </tr>
                 );
@@ -628,12 +682,21 @@ export function ProjectsPage({ products, projects, loading = false, navigate, op
       ) : (
         <div className="proj-grid">{pageItems.map((project) => {
           const cover = projCover(project.name);
+          const no = projStageNo(project);
+          const isSel = selected.has(project.id);
           return (
-            <article className="proj-card" key={project.id} onClick={() => openPipeline(project.id)}>
+            <article className={`proj-card${editMode && isSel ? " selected" : ""}`} key={project.id} onClick={() => (editMode ? toggleSelect(project.id) : openPipeline(project.id))}>
+              <span className="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 8 7 12 13 4" /></svg></span>
               <div className={`placeholder card-thumb${cover ? " has-mock-media" : ""}`} style={cover ? projMock(cover) : undefined}><span className="ph-frame">9:16</span></div>
               <div className="card-body">
-                <div className="card-name">{project.name}</div>
-                <div className="card-sub">{productTitle(project.product)}</div>
+                <div>
+                  <div className="card-name">{project.name}</div>
+                  <div className="card-sub">{productTitle(project.product)} · {projShots(project)} 镜</div>
+                </div>
+                <div className="hstack">
+                  <div className="prog">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={project.status === "failed" && i === no ? "fail" : i < no ? "done" : i === no ? "cur" : ""} />)}</div>
+                  <span className="muted-2 mono" style={{ fontSize: "10.5px" }}>{no}/5</span>
+                </div>
                 <div className="card-foot"><span className={`pill ${projPillClass(project)}`}><span className="dot" />{projStatusLabel(project)}</span><span className="card-time">{projDate(project)}</span></div>
               </div>
             </article>
@@ -642,7 +705,21 @@ export function ProjectsPage({ products, projects, loading = false, navigate, op
       )}
       <Pager page={curPage} total={filtered.length} pageSize={PROJ_PAGE_SIZE} onChange={setPage} />
       {filtered.length === 0 && <EmptyPanel title="当前筛选下没有项目" action="新建视频项目" onAction={() => navigate("projectWizard")} />}
+
+      {/* 批量管理栏 · 编辑态吸底浮动(显隐由 body.edit-mode 控)· 蓝本同 products-page */}
+      <div className="bulk-bar" role="toolbar" aria-label="批量管理">
+        <span className="ct">已选 <b>{selected.size}</b> 项</span>
+        <button className="clear-sel" type="button" disabled={selected.size === 0} onClick={() => setSelected(new Set())}>清空</button>
+        <span className="sep" />
+        <button className="danger" type="button" disabled={selected.size === 0 || bulkDeleting} onClick={() => setBulkConfirm(true)}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg>
+          {bulkDeleting ? "删除中…" : "删除所选"}
+        </button>
+        <button type="button" onClick={() => setEditMode(false)}>完成</button>
+      </div>
+
       <ConfirmModal open={Boolean(deleteTarget)} title="确认删除项目" detail={`即将删除 ${deleteTarget?.name || ""}。`} confirmText="删除" onCancel={() => setDeleteTarget(null)} onConfirm={confirmDelete} />
+      <ConfirmModal open={bulkConfirm} title="确认批量删除" detail={`即将删除选中的 ${selected.size} 个项目。`} confirmText="删除" onCancel={() => setBulkConfirm(false)} onConfirm={confirmBulkDelete} />
     </section>
   );
 }