1

src/components/puzzle-agent/PuzzleAgentWorkspace.tsx

@@ -1,5 +1,5 @@
 import { ArrowLeft, ImagePlus, Loader2, Sparkles, X } from 'lucide-react';
-import { type ChangeEvent, useEffect, useState } from 'react';
+import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { PuzzleAgentActionRequest } from '../../../packages/shared/src/contracts/puzzleAgentActions';
 import type {
@@ -7,6 +7,7 @@ import type {
   PuzzleAgentSessionSnapshot,
   SendPuzzleAgentMessageRequest,
 } from '../../../packages/shared/src/contracts/puzzleAgentSession';
+import { readPuzzleReferenceImageAsDataUrl } from '../../services/puzzleReferenceImage';
 
 type PuzzleAgentWorkspaceProps = {
   session: PuzzleAgentSessionSnapshot | null;
@@ -16,39 +17,48 @@ type PuzzleAgentWorkspaceProps = {
   onSubmitMessage: (payload: SendPuzzleAgentMessageRequest) => void;
   onExecuteAction: (payload: PuzzleAgentActionRequest) => void;
   onCreateFromForm?: (payload: CreatePuzzleAgentSessionRequest) => void;
+  onAutoSaveForm?: (payload: CreatePuzzleAgentSessionRequest) => void;
   initialFormPayload?: CreatePuzzleAgentSessionRequest | null;
 };
 
 type PuzzleFormState = {
-  title: string;
+  workTitle: string;
+  workDescription: string;
   pictureDescription: string;
   referenceImageSrc: string;
   referenceImageLabel: string;
 };
 
 const EMPTY_FORM_STATE: PuzzleFormState = {
-  title: '',
+  workTitle: '',
+  workDescription: '',
   pictureDescription: '',
   referenceImageSrc: '',
   referenceImageLabel: '',
 };
 
-function readPuzzleReferenceImageAsDataUrl(file: File) {
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onerror = () => reject(new Error('参考图读取失败，请重试。'));
-    reader.onload = () => resolve(String(reader.result || ''));
-    reader.readAsDataURL(file);
-  });
-}
-
 function resolveInitialFormState(
   session: PuzzleAgentSessionSnapshot | null,
   initialFormPayload: CreatePuzzleAgentSessionRequest | null = null,
 ): PuzzleFormState {
+  const formDraft = session?.draft?.formDraft;
+  if (formDraft) {
+    return {
+      workTitle: formDraft.workTitle ?? '',
+      workDescription: formDraft.workDescription ?? '',
+      pictureDescription: formDraft.pictureDescription ?? '',
+      referenceImageSrc: initialFormPayload?.referenceImageSrc ?? '',
+      referenceImageLabel: initialFormPayload?.referenceImageSrc
+        ? '已选择参考图'
+        : '',
+    };
+  }
+
   if (initialFormPayload) {
     return {
-      title: initialFormPayload.seedText ?? '',
+      workTitle:
+        initialFormPayload.workTitle ?? initialFormPayload.seedText ?? '',
+      workDescription: initialFormPayload.workDescription ?? '',
       pictureDescription: initialFormPayload.pictureDescription ?? '',
       referenceImageSrc: initialFormPayload.referenceImageSrc ?? '',
       referenceImageLabel: initialFormPayload.referenceImageSrc
@@ -62,11 +72,17 @@ function resolveInitialFormState(
   }
 
   return {
-    title:
+    workTitle:
+      session.draft?.workTitle ||
       session.draft?.levelName ||
+      session.seedText ||
       session.anchorPack.themePromise.value ||
       session.messages.find((message) => message.role === 'user')?.text ||
       '',
+    workDescription:
+      session.draft?.workDescription ||
+      session.anchorPack.themePromise.value ||
+      '',
     pictureDescription:
       session.draft?.summary || session.anchorPack.visualSubject.value || '',
     referenceImageSrc: '',
@@ -85,6 +101,7 @@ export function PuzzleAgentWorkspace({
   onBack,
   onExecuteAction,
   onCreateFromForm,
+  onAutoSaveForm,
   initialFormPayload = null,
 }: PuzzleAgentWorkspaceProps) {
   const [formState, setFormState] = useState<PuzzleFormState>(() =>
@@ -93,15 +110,95 @@ export function PuzzleAgentWorkspace({
   const [referenceImageError, setReferenceImageError] = useState<string | null>(
     null,
   );
+  const previousSessionIdRef = useRef<string | null>(session?.sessionId ?? null);
+  const appliedInitialFormKeyRef = useRef<string | null>(null);
 
   useEffect(() => {
+    const currentSessionId = session?.sessionId ?? null;
+    if (
+      currentSessionId &&
+      previousSessionIdRef.current === null &&
+      appliedInitialFormKeyRef.current === JSON.stringify(initialFormPayload ?? null)
+    ) {
+      previousSessionIdRef.current = currentSessionId;
+      return;
+    }
+
+    previousSessionIdRef.current = currentSessionId;
+    const nextInitialFormKey =
+      currentSessionId ?? JSON.stringify(initialFormPayload ?? null);
+    if (appliedInitialFormKeyRef.current === nextInitialFormKey) {
+      return;
+    }
+
+    appliedInitialFormKeyRef.current = nextInitialFormKey;
     setFormState(resolveInitialFormState(session, initialFormPayload));
     setReferenceImageError(null);
-  }, [initialFormPayload, session]);
+  }, [initialFormPayload, session?.sessionId]);
 
-  const title = formState.title.trim();
+  const workTitle = formState.workTitle.trim();
+  const workDescription = formState.workDescription.trim();
   const pictureDescription = formState.pictureDescription.trim();
-  const canSubmit = Boolean(title && pictureDescription) && !isBusy;
+  const canSubmit =
+    Boolean(workTitle && workDescription && pictureDescription) && !isBusy;
+  const autosavePayload = useMemo(
+    () => ({
+      seedText: workTitle,
+      workTitle,
+      workDescription,
+      pictureDescription,
+      referenceImageSrc: formState.referenceImageSrc || null,
+    }),
+    [
+      formState.referenceImageSrc,
+      pictureDescription,
+      workDescription,
+      workTitle,
+    ],
+  );
+  const autosaveSignature = JSON.stringify([
+    autosavePayload.workTitle,
+    autosavePayload.workDescription,
+    autosavePayload.pictureDescription,
+  ]);
+  const lastAutosaveSignatureRef = useRef(autosaveSignature);
+  const autosaveSessionIdRef = useRef(session?.sessionId ?? null);
+
+  useEffect(() => {
+    const currentSessionId = session?.sessionId ?? null;
+    if (autosaveSessionIdRef.current === currentSessionId) {
+      return;
+    }
+
+    autosaveSessionIdRef.current = currentSessionId;
+    lastAutosaveSignatureRef.current = autosaveSignature;
+  }, [autosaveSignature, session?.sessionId]);
+
+  useEffect(() => {
+    if (
+      !session ||
+      session.stage !== 'collecting_anchors' ||
+      !session.draft?.formDraft ||
+      !onAutoSaveForm ||
+      lastAutosaveSignatureRef.current === autosaveSignature
+    ) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      lastAutosaveSignatureRef.current = autosaveSignature;
+      onAutoSaveForm(autosavePayload);
+    }, 700);
+
+    return () => window.clearTimeout(timer);
+  }, [
+    autosavePayload,
+    autosaveSignature,
+    onAutoSaveForm,
+    session?.draft?.formDraft,
+    session?.stage,
+    session?.sessionId,
+  ]);
 
   const handleReferenceImageChange = async (
     event: ChangeEvent<HTMLInputElement>,
@@ -135,12 +232,14 @@ export function PuzzleAgentWorkspace({
     }
 
     const payload = {
-      seedText: title,
+      seedText: workTitle,
+      workTitle,
+      workDescription,
       pictureDescription,
       referenceImageSrc: formState.referenceImageSrc || null,
     };
 
-    if (onCreateFromForm) {
+    if (!session && onCreateFromForm) {
       onCreateFromForm(payload);
       return;
     }
@@ -148,6 +247,9 @@ export function PuzzleAgentWorkspace({
     onExecuteAction({
       action: 'compile_puzzle_draft',
       promptText: pictureDescription,
+      workTitle,
+      workDescription,
+      pictureDescription,
       referenceImageSrc: formState.referenceImageSrc || null,
       candidateCount: 1,
     });
@@ -174,19 +276,38 @@ export function PuzzleAgentWorkspace({
           <div className="space-y-5">
             <label className="block">
               <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-                拼图标题
+                作品名称
               </span>
               <input
-                value={formState.title}
+                value={formState.workTitle}
                 disabled={isBusy}
                 onChange={(event) =>
                   setFormState((current) => ({
                     ...current,
-                    title: event.target.value,
+                    workTitle: event.target.value,
                   }))
                 }
                 className="mt-2 w-full rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base font-semibold text-[var(--platform-text-strong)] outline-none"
-                aria-label="拼图标题"
+                aria-label="作品名称"
+              />
+            </label>
+
+            <label className="block">
+              <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
+                作品描述
+              </span>
+              <textarea
+                value={formState.workDescription}
+                disabled={isBusy}
+                rows={4}
+                onChange={(event) =>
+                  setFormState((current) => ({
+                    ...current,
+                    workDescription: event.target.value,
+                  }))
+                }
+                className="mt-2 w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
+                aria-label="作品描述"
               />
             </label>