批量重算

src/features/resources/api.test.ts

@@ -268,7 +268,7 @@ test("resource mp4 layout batch API uses narrow update endpoint", async () => {
     ]);
 
     const [url, init] = vi.mocked(fetch).mock.calls[0];
-    expect(String(url)).toContain("/api/v1/admin/resources/mp4-layouts");
+    expect(String(url)).toContain("/api/v1/admin/resources/mp4-layouts/batch");
     expect(init?.method).toBe("PUT");
     expect(JSON.parse(String(init?.body))).toMatchObject({
         items: [{ resourceId: 11 }],

src/features/resources/api.ts

@@ -312,7 +312,7 @@ export function updateResource(resourceId: EntityId, payload: ResourcePayload):
 }
 
 export function updateResourceMp4Layouts(items: ResourceMp4LayoutUpdatePayload[]): Promise<ResourceDto[]> {
-    return apiRequest<ResourceDto[], ResourceMp4LayoutsPayload>("/v1/admin/resources/mp4-layouts", {
+    return apiRequest<ResourceDto[], ResourceMp4LayoutsPayload>("/v1/admin/resources/mp4-layouts/batch", {
         body: { items },
         method: "PUT",
     });

src/features/resources/pages/ResourceListPage.jsx

@@ -6,6 +6,10 @@ import Inventory2Outlined from "@mui/icons-material/Inventory2Outlined";
 import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
 import Checkbox from "@mui/material/Checkbox";
 import CircularProgress from "@mui/material/CircularProgress";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
 import LinearProgress from "@mui/material/LinearProgress";
 import MenuItem from "@mui/material/MenuItem";
 import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
@@ -21,7 +25,7 @@ import {
 import { DataState } from "@/shared/ui/DataState.jsx";
 import { DataTable } from "@/shared/ui/DataTable.jsx";
 import { UploadField } from "@/shared/ui/UploadField.jsx";
-import { useConfirm } from "@/shared/ui/ConfirmProvider.jsx";
+import { Button } from "@/shared/ui/Button.jsx";
 import {
     AdminActionIconButton,
     AdminListBody,
@@ -132,13 +136,13 @@ const baseColumns = [
 
 export function ResourceListPage() {
     const page = useResourceListPage();
-    const confirm = useConfirm();
     const { showToast } = useToast();
     const folderInputRef = useRef(null);
     const [batchOpen, setBatchOpen] = useState(false);
     const [batchPlan, setBatchPlan] = useState({ errors: [], resources: [] });
     const [batchProgress, setBatchProgress] = useState(emptyBatchProgress);
     const [batchMp4Progress, setBatchMp4Progress] = useState(emptyBatchProgress);
+    const [mp4BatchResult, setMp4BatchResult] = useState(null);
     const [selectedResourceIds, setSelectedResourceIds] = useState([]);
     const rawItems = page.data.items;
     const items = useMemo(() => rawItems || [], [rawItems]);
@@ -370,7 +374,7 @@ export function ResourceListPage() {
                 } else {
                     layoutCounts.transparent += 1;
                 }
-                updates.push({ metadataJson, resourceId: resource.resourceId });
+                updates.push({ layout: confirmedLayout, metadataJson, resource, resourceId: resource.resourceId });
             } catch (err) {
                 failures.push(`${resource.name || resource.resourceCode || resource.resourceId}: ${err.message || "解析失败"}`);
             }
@@ -384,19 +388,20 @@ export function ResourceListPage() {
             setBatchMp4Progress(emptyBatchProgress);
             return;
         }
-        const accepted = await confirm({
+        setBatchMp4Progress(emptyBatchProgress);
-            confirmText: "写入",
+        setMp4BatchResult({ ignoredCount, layoutCounts, rows: updates });
-            message: `检测完成：普通 MP4 ${layoutCounts.normal} 个，透明 MP4 ${layoutCounts.transparent} 个，非 MP4 自动忽略 ${ignoredCount} 个。`,
+    };
-            title: "写入 MP4 布局",
+
-        });
+    const writeMp4BatchResult = async () => {
-        if (!accepted) {
+        const rows = mp4BatchResult?.rows || [];
-            setBatchMp4Progress(emptyBatchProgress);
+        if (!rows.length || batchMp4Running) {
             return;
         }
         try {
-            setBatchMp4Progress({ label: `保存 MP4 布局 ${updates.length} 个`, running: true, value: 90 });
+            setBatchMp4Progress({ label: `保存 MP4 布局 ${rows.length} 个`, running: true, value: 90 });
-            await updateResourceMp4Layouts(updates);
+            await updateResourceMp4Layouts(rows.map(({ metadataJson, resourceId }) => ({ metadataJson, resourceId })));
-            showToast(`已更新 ${updates.length} 个 MP4 布局`, "success");
+            showToast(`已更新 ${rows.length} 个 MP4 布局`, "success");
+            setMp4BatchResult(null);
             setSelectedResourceIds([]);
             await page.reload();
         } catch (err) {
@@ -582,6 +587,13 @@ export function ResourceListPage() {
                 onFileChange={handleFolderChange}
                 onSubmit={submitBatchUpload}
             />
+            <Mp4BatchResultDialog
+                loading={batchMp4Running}
+                open={Boolean(mp4BatchResult)}
+                result={mp4BatchResult}
+                onClose={() => setMp4BatchResult(null)}
+                onSubmit={writeMp4BatchResult}
+            />
         </AdminListPage>
     );
 }
@@ -807,6 +819,68 @@ function BatchMp4LayoutCell({ onChangeFrame, onChangeLayout, onConfirm, resource
     );
 }
 
+function Mp4BatchResultDialog({ loading, onClose, onSubmit, open, result }) {
+    const rows = result?.rows || [];
+    const layoutCounts = result?.layoutCounts || {};
+
+    return (
+        <Dialog fullWidth maxWidth="lg" open={open} onClose={loading ? undefined : onClose}>
+            <DialogTitle>写入 MP4 布局</DialogTitle>
+            <DialogContent>
+                <div className={styles.mp4ResultSummary}>
+                    检测完成：普通 MP4 {layoutCounts.normal || 0} 个，透明 MP4 {layoutCounts.transparent || 0} 个，非
+                    MP4 自动忽略 {result?.ignoredCount || 0} 个。
+                </div>
+                <div className={styles.mp4ResultTableWrap}>
+                    <table className={styles.mp4ResultTable}>
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>资源</th>
+                                <th>类型</th>
+                                <th>布局</th>
+                                <th>视频宽高</th>
+                                <th>RGB 区域</th>
+                                <th>Alpha 区域</th>
+                                <th>置信度</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {rows.map(({ layout, resource, resourceId }) => (
+                                <tr key={resourceId}>
+                                    <td>{resourceId}</td>
+                                    <td>
+                                        <span className={styles.mp4ResultResource}>
+                                            {resource?.name || resource?.resourceCode || resourceId}
+                                        </span>
+                                        <span className={styles.mp4ResultCode}>{resource?.resourceCode || "-"}</span>
+                                    </td>
+                                    <td>{resourceTypeLabels[resource?.resourceType] || resource?.resourceType || "-"}</td>
+                                    <td>{mp4LayoutLabel(layout)}</td>
+                                    <td>
+                                        {layout?.video_w || "-"}x{layout?.video_h || "-"}
+                                    </td>
+                                    <td>{frameText(layout?.rgb_frame) || "-"}</td>
+                                    <td>{frameText(layout?.alpha_frame) || "-"}</td>
+                                    <td>{formatConfidence(layout?.confidence)}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </DialogContent>
+            <DialogActions>
+                <Button disabled={loading} onClick={onClose}>
+                    取消
+                </Button>
+                <Button disabled={loading || !rows.length} variant="primary" onClick={onSubmit}>
+                    {loading ? "写入中" : "写入"}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
 function ResourceRowActions({ page, resource }) {
     const { showToast } = useToast();
     const [recalculating, setRecalculating] = useState(false);
@@ -853,6 +927,14 @@ function ResourceRowActions({ page, resource }) {
     );
 }
 
+function formatConfidence(value) {
+    const confidence = Number(value || 0);
+    if (!Number.isFinite(confidence)) {
+        return "0";
+    }
+    return confidence.toFixed(3);
+}
+
 function mp4ResourceAnimationSource(resource) {
     const source = String(resource?.animationUrl || resource?.assetUrl || "").trim();
     return isMp4Source(source) ? source : "";

src/features/resources/resources.module.css

@@ -404,6 +404,64 @@
     cursor: not-allowed;
 }
 
+.mp4ResultSummary {
+    margin-bottom: var(--space-3);
+    color: var(--text-primary);
+    font-weight: 650;
+    line-height: 1.6;
+}
+
+.mp4ResultTableWrap {
+    overflow: auto;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+}
+
+.mp4ResultTable {
+    width: 100%;
+    min-width: 980px;
+    border-collapse: collapse;
+    font-size: var(--admin-font-size);
+}
+
+.mp4ResultTable th,
+.mp4ResultTable td {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border-muted);
+    color: var(--text-primary);
+    text-align: left;
+    vertical-align: top;
+    white-space: nowrap;
+}
+
+.mp4ResultTable th {
+    background: var(--bg-card-strong);
+    color: var(--text-secondary);
+    font-weight: 750;
+}
+
+.mp4ResultTable tbody tr:last-child td {
+    border-bottom: 0;
+}
+
+.mp4ResultResource,
+.mp4ResultCode {
+    display: block;
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mp4ResultResource {
+    color: var(--text-primary);
+    font-weight: 650;
+}
+
+.mp4ResultCode {
+    margin-top: 2px;
+    color: var(--text-tertiary);
+}
+
 .batchTableHead {
     border-bottom: 1px solid var(--border);
     background: var(--bg-card-strong);