feat: 电商页面 KeepAlive 保活机制，切换页面不再丢失生成状态

通过 display:none 模式实现轻量 KeepAlive，电商页面首次访问后保持挂载，
切换到其他页面再切回时所有右侧面板状态（上传图片、生成进度、结果）完整保留。
同时清理项目中的临时文件和本地冗余图片。

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

src/hooks/useGenerationStatus.ts

@@ -0,0 +1,41 @@
+import { useCallback, useRef, useState } from "react";
+
+export type GenStatus = "idle" | "ready" | "generating" | "done" | "failed";
+
+export interface UseGenerationStatusReturn {
+  status: GenStatus;
+  error: string | null;
+  abortRef: { current: boolean };
+  start: () => void;
+  succeed: () => void;
+  fail: (msg: string) => void;
+  reset: () => void;
+  cancel: () => void;
+  isGenerating: boolean;
+  isFailed: boolean;
+  isIdle: boolean;
+}
+
+export function useGenerationStatus(): UseGenerationStatusReturn {
+  const [status, setStatus] = useState<GenStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const abortRef = useRef({ current: false });
+
+  const start = useCallback(() => {
+    setStatus("generating");
+    setError(null);
+    abortRef.current = { current: false };
+  }, []);
+
+  const succeed = useCallback(() => setStatus("done"), []);
+  const fail = useCallback((msg: string) => { setStatus("failed"); setError(msg); }, []);
+  const reset = useCallback(() => { setStatus("idle"); setError(null); }, []);
+  const cancel = useCallback(() => { abortRef.current.current = true; }, []);
+
+  return {
+    status, error, abortRef, start, succeed, fail, reset, cancel,
+    isGenerating: status === "generating",
+    isFailed: status === "failed",
+    isIdle: status === "idle",
+  };
+}

src/hooks/useGenerationTasks.ts

@@ -0,0 +1,115 @@
+import { useEffect, useMemo, useRef, useCallback } from "react";
+import type { GenerationQueueItem } from "../stores/useGenerationStore";
+import { useGenerationStore } from "../stores/useGenerationStore";
+import {
+  startBackgroundPolling,
+  subscribeToTaskUpdates,
+} from "../services/backgroundTaskRunner";
+
+interface UseGenerationTasksOptions {
+  sourceView: string;
+  autoResume?: boolean;
+}
+
+export function useGenerationTasks(options: UseGenerationTasksOptions) {
+  const { sourceView, autoResume = true } = options;
+  const store = useGenerationStore();
+  const pollingStartedRef = useRef(false);
+
+  // ── Auto-resume: re-subscribe to running tasks on mount ────
+  useEffect(() => {
+    if (!autoResume || pollingStartedRef.current) return;
+    pollingStartedRef.current = true;
+
+    const active = store.getRunningTasks().filter((t) => t.sourceView === sourceView);
+    if (active.length > 0) {
+      startBackgroundPolling();
+    }
+
+    return () => {
+      pollingStartedRef.current = false;
+    };
+  }, [autoResume, sourceView, store]);
+
+  // ── Subscribe to live updates ───────────────────────────
+  useEffect(() => {
+    return subscribeToTaskUpdates((updated) => {
+      store.updateTask(updated.id, updated);
+    });
+  }, [store]);
+
+  // ── View-scoped computed lists ──────────────────────────
+  const myTasks = useMemo(
+    () => store.queue.filter((t) => t.sourceView === sourceView),
+    [store.queue, sourceView],
+  );
+
+  const activeTasks = useMemo(
+    () => myTasks.filter((t) => t.status === "running" || t.status === "pending"),
+    [myTasks],
+  );
+
+  const completedTasks = useMemo(
+    () => myTasks.filter((t) => t.status === "completed"),
+    [myTasks],
+  );
+
+  const failedTasks = useMemo(
+    () => myTasks.filter((t) => t.status === "failed"),
+    [myTasks],
+  );
+
+  // ── Actions ─────────────────────────────────────────────
+  const submitTask = useCallback(
+    (task: Omit<GenerationQueueItem, "id" | "createdAt">) => {
+      const id = `gen-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      store.addTask({ ...task, id, createdAt: Date.now() });
+      return id;
+    },
+    [store],
+  );
+
+  const updateTask = useCallback(
+    (id: string, patch: Partial<GenerationQueueItem>) => {
+      store.updateTask(id, patch);
+    },
+    [store],
+  );
+
+  const markCompleted = useCallback(
+    (id: string, resultUrl: string) => {
+      store.updateTask(id, { status: "completed", progress: 100, resultUrl });
+    },
+    [store],
+  );
+
+  const markFailed = useCallback(
+    (id: string, error: string) => {
+      store.updateTask(id, { status: "failed", error });
+    },
+    [store],
+  );
+
+  const retryTask = useCallback(
+    (id: string) => {
+      const task = store.queue.find((t) => t.id === id);
+      if (task) {
+        store.updateTask(id, { status: "pending", progress: 0, error: null });
+      }
+    },
+    [store],
+  );
+
+  return {
+    tasks: myTasks,
+    activeTasks,
+    completedTasks,
+    failedTasks,
+    submitTask,
+    updateTask,
+    markCompleted,
+    markFailed,
+    retryTask,
+    hasActiveTasks: activeTasks.length > 0,
+  };
+}