perf: backfill agent workflow preview images at 230px

components/agents/AgentWorkflowMaterialPicker.tsx

@@ -1035,7 +1035,7 @@ export function AgentWorkflowMaterialPicker({
                           src={option.previewImageUrl}
                           alt={option.previewFileName || option.skuName}
                           className="h-full w-full object-cover"
-                          previewWidth={320}
+                          previewWidth={230}
                           previewQuality={72}
                         />
                       ) : (

components/agents/AgentWorkflowPanelNew.tsx

@@ -30,6 +30,10 @@ import type {
   AgentWorkflowStepKey,
   AgentWorkflowUiConfig,
 } from "@/types/agent";
+import {
+  AGENT_PRESET_PREVIEW_IMAGE_SIZES,
+  getAgentPresetPreviewImageUrl,
+} from "./agent-preset-preview";
 
 export interface AgentWorkflowInputs {
   primarySku: string;
@@ -92,6 +96,8 @@ function StepCard({
   onClick: () => void;
   index: number;
 }) {
+  const previewUrl = getAgentPresetPreviewImageUrl(option.previewImageUrl || "");
+
   return (
     <motion.button
       type="button"
@@ -102,7 +108,7 @@ function StepCard({
       whileHover={{ y: -2, scale: 1.01 }}
       whileTap={{ scale: 0.99 }}
       className={cn(
-        "group relative overflow-hidden rounded-2xl text-left transition-all duration-300",
+        "group relative mx-auto w-full max-w-[230px] overflow-hidden rounded-2xl text-left transition-all duration-300",
         "border bg-white",
         selected
           ? [
@@ -127,10 +133,14 @@ function StepCard({
 
       {/* 预览图 */}
       <div className="relative aspect-[16/10] w-full overflow-hidden bg-slate-50">
-        {option.previewImageUrl ? (
+        {previewUrl ? (
           <motion.img
-            src={option.previewImageUrl}
+            src={previewUrl}
             alt={option.buttonName}
+            loading={index < 4 ? "eager" : "lazy"}
+            decoding="async"
+            fetchPriority={index < 4 ? "high" : "low"}
+            sizes={AGENT_PRESET_PREVIEW_IMAGE_SIZES}
             className="h-full w-full object-cover"
             whileHover={{ scale: 1.05 }}
             transition={{ duration: 0.4 }}

lib/agents/workflow-preview-images.ts

@@ -4,8 +4,8 @@ import { createHash } from "node:crypto";
 import type { AgentWorkflowOptionUiConfig, AgentWorkflowUiConfig } from "@/types/agent";
 import { uploadFile } from "@/lib/storage/service";
 
-const PREVIEW_WIDTH = 512;
-const PREVIEW_QUALITY = 68;
+const PREVIEW_WIDTH = 230;
+const PREVIEW_QUALITY = 76;
 const FETCH_TIMEOUT_MS = 15_000;
 const MAX_SOURCE_BYTES = 40 * 1024 * 1024;
 const DEFAULT_CONCURRENCY = 3;

package.json

@@ -33,6 +33,7 @@
     "clean:artifacts": "node scripts/clean-local-artifacts.mjs",
     "smoke:routes": "node scripts/smoke-routes.mjs",
     "verify:release": "node scripts/verify-release.mjs",
+    "backfill:agent-preview-images": "pnpm exec tsx scripts/backfill-agent-workflow-preview-images.ts",
     "format": "pnpm exec ultracite fix",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "npx tsx lib/db/migrate.ts",

scripts/backfill-agent-workflow-preview-images.ts

@@ -1,6 +1,8 @@
 import { config as loadEnv } from "dotenv";
 import { eq } from "drizzle-orm";
 import Module from "node:module";
+import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
 
 loadEnv({ path: ".env.local" });
 
@@ -22,6 +24,16 @@ moduleLoader._load = function patchedServerOnlyLoad(
 
 const dryRun = process.argv.includes("--dry-run");
 const force = process.argv.includes("--force");
+const skipBackup = process.argv.includes("--skip-backup");
+
+function createBackupPath() {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+  return path.join(
+    process.cwd(),
+    "backups",
+    `agent-workflow-ui-config-before-preview-backfill-${timestamp}.json`
+  );
+}
 
 async function main() {
   const dbModule = await import("../lib/db");
@@ -67,6 +79,24 @@ async function main() {
   }
 
   if (summary.optimized > 0) {
+    if (!skipBackup) {
+      const backupPath = createBackupPath();
+      await mkdir(path.dirname(backupPath), { recursive: true });
+      await writeFile(
+        backupPath,
+        JSON.stringify(
+          {
+            key: workflowConfig.AGENT_WORKFLOW_UI_CONFIG_KEY,
+            backedUpAt: new Date().toISOString(),
+            value: setting.value,
+          },
+          null,
+          2
+        )
+      );
+      console.log(`Backup written: ${backupPath}`);
+    }
+
     await db
       .update(systemSettings)
       .set({