fix(POSTV1-08): 修复文字拖动闪烁与自动保存

apps/web/src/editor-page.tsx

@@ -86,6 +86,14 @@ interface EditorExportResult {
   status: ExportFlowStatus;
 }
 
+function withTextDraft(canvasState: CanvasState, textEdit: TextEditState | undefined) {
+  if (!textEdit) return canvasState;
+  return {
+    ...canvasState,
+    elements: canvasState.elements.map((element) => element.element_id === textEdit.elementId ? textEdit.draft : element),
+  };
+}
+
 interface EditorProject {
   canvas_state?: CanvasState;
   created_at: string;
@@ -155,6 +163,7 @@ export function EditorPage({ projectId }: { projectId: string }) {
   const elementControllerRef = useRef<CanvasElementController | undefined>(undefined);
   const dragRef = useRef<{ base: CanvasState; last: CanvasState; selectedIds: string[] } | undefined>(undefined);
   const opacityGestureRef = useRef<{ base: CanvasState; last: CanvasState; selectedIds: string[] } | undefined>(undefined);
+  const textHistoryRef = useRef<{ base: CanvasState; elementId: string; last: CanvasState } | undefined>(undefined);
   const clipboardRef = useRef<CanvasElement[]>([]);
   const fontLoaderRef = useRef<ArchivedFontLoader | undefined>(undefined);
   const conflictExportGuardRef = useRef(new ConflictExportGuard());
@@ -275,6 +284,10 @@ export function EditorPage({ projectId }: { projectId: string }) {
     });
   }, [canvasState, selectedIds.join("|")]);
 
+  useEffect(() => {
+    if (textEdit) commitTextDraftAutomatically(textEdit);
+  }, [textEdit?.draft]);
+
   async function ensureFont(fontId: string, url: string, retry = false) {
     const current = fontStatuses[fontId];
     if (current === "ready" || (current === "unavailable" && !retry)) return current;
@@ -291,15 +304,24 @@ export function EditorPage({ projectId }: { projectId: string }) {
     await Promise.all(available.map((template) => ensureFont(template.defaultFontId, template.fontUrl!, true)));
   }
 
-  function commitCanvas(next: CanvasState) {
+  function finalizeTextHistory() {
+    const pending = textHistoryRef.current;
+    if (!pending) return undefined;
+    textHistoryRef.current = undefined;
+    historyRef.current?.commit(pending.last);
+    return pending.last;
+  }
+
+  function commitCanvas(next: CanvasState, options: { preserveTextEdit?: boolean } = {}) {
     if (!project || saveStatus === "conflicted") return;
-    historyRef.current?.commit(next);
+    const finalizedText = finalizeTextHistory();
+    if (!finalizedText || JSON.stringify(finalizedText) !== JSON.stringify(next)) historyRef.current?.commit(next);
     elementControllerRef.current?.replaceState(next);
     setSelectedIds(elementControllerRef.current?.selectedIds ?? []);
     setCanvasState(next);
     setDraftAdjustments(next.background.adjustments);
     queueRef.current?.commit({ canvas_state: next, name: project.name });
-    setTextEdit(undefined);
+    if (!options.preserveTextEdit) setTextEdit(undefined);
   }
 
   function applyPreview() {
@@ -309,6 +331,7 @@ export function EditorPage({ projectId }: { projectId: string }) {
   }
 
   function undo() {
+    finalizeTextHistory();
     const previous = historyRef.current?.undo();
     if (previous) {
       elementControllerRef.current?.replaceState(previous);
@@ -321,6 +344,7 @@ export function EditorPage({ projectId }: { projectId: string }) {
   }
 
   function redo() {
+    finalizeTextHistory();
     const next = historyRef.current?.redo();
     if (next) {
       elementControllerRef.current?.replaceState(next);
@@ -523,6 +547,37 @@ export function EditorPage({ projectId }: { projectId: string }) {
     });
   }
 
+  function commitTextDraftAutomatically(editState: TextEditState) {
+    if (!canvasState || !project || saveStatus === "conflicted") return;
+    const index = canvasState.elements.findIndex((element) => element.element_id === editState.elementId);
+    if (index < 0 || JSON.stringify(canvasState.elements[index]) === JSON.stringify(editState.draft)) return;
+    try {
+      const complete = new TextEditSession(editState.draft, P0A_TEXT_TEMPLATES).complete();
+      const next = structuredClone(canvasState);
+      next.elements[index] = complete;
+      const history = textHistoryRef.current;
+      if (!history || history.elementId !== editState.elementId) {
+        if (history) finalizeTextHistory();
+        textHistoryRef.current = { base: canvasState, elementId: editState.elementId, last: next };
+      } else {
+        history.last = next;
+      }
+      elementControllerRef.current?.replaceState(next);
+      setCanvasState(next);
+      queueRef.current?.commit({ canvas_state: next, name: project.name });
+      if (complete.template_or_asset_id !== editState.originalTemplateId) {
+        void recordRecentTextTemplate(complete.template_or_asset_id, complete.resource_version);
+      }
+      setTextEdit((current) => current?.elementId === editState.elementId ? {
+        ...current,
+        draft: complete,
+        originalTemplateId: complete.template_or_asset_id,
+      } : current);
+    } catch (error) {
+      if (!(error instanceof Error && error.message === "text_content_required")) showNotice("文字编辑未能自动保存");
+    }
+  }
+
   async function changeTextTemplate(templateId: string) {
     const template = P0A_TEXT_TEMPLATES.find((candidate) => candidate.templateId === templateId);
     if (!template?.fontUrl) return;
@@ -549,6 +604,11 @@ export function EditorPage({ projectId }: { projectId: string }) {
 
   function completeTextEdit() {
     if (!textEdit) return;
+    if (!pendingTextDraft()) {
+      finalizeTextHistory();
+      showNotice("文字修改已进入自动保存");
+      return;
+    }
     try {
       const edit = new TextEditSession(textEdit.draft, P0A_TEXT_TEMPLATES);
       const complete = edit.complete();
@@ -566,8 +626,16 @@ export function EditorPage({ projectId }: { projectId: string }) {
   }
 
   function cancelTextEdit() {
+    const pendingHistory = textHistoryRef.current;
+    if (pendingHistory && project) {
+      textHistoryRef.current = undefined;
+      elementControllerRef.current?.replaceState(pendingHistory.base);
+      setCanvasState(pendingHistory.base);
+      queueRef.current?.commit({ canvas_state: pendingHistory.base, name: project.name });
+    }
     if (canvasState && textEdit) {
-      const current = canvasState.elements.find((element) => element.element_id === textEdit.elementId);
+      const source = pendingHistory?.base ?? canvasState;
+      const current = source.elements.find((element) => element.element_id === textEdit.elementId);
       if (current) setTextEdit({ draft: structuredClone(current), elementId: current.element_id, originalTemplateId: current.template_or_asset_id });
     }
     showNotice("已取消未提交的文字修改");
@@ -717,13 +785,15 @@ export function EditorPage({ projectId }: { projectId: string }) {
   }
 
   function selectAt(point: CanvasPoint, append: boolean) {
+    finalizeTextHistory();
     const controller = controllerForCurrent();
     if (!controller || !canvasState) return false;
     const candidates = controller.candidatesAt(point);
     const selection = controller.selectAt(point, { append: append || multiMode });
     setSelectedIds(selection);
     setCandidateMenu(undefined);
-    dragRef.current = { base: canvasState, last: canvasState, selectedIds: selection };
+    const dragBase = withTextDraft(canvasState, textEdit);
+    dragRef.current = { base: dragBase, last: dragBase, selectedIds: selection };
     return candidates.length > 0;
   }
 
@@ -735,19 +805,25 @@ export function EditorPage({ projectId }: { projectId: string }) {
     const preview = previewController.moveSelected(delta);
     drag.last = preview.state;
     setCanvasState(preview.state);
+    setTextEdit((current) => {
+      if (!current || !drag.selectedIds.includes(current.elementId)) return current;
+      const movedDraft = preview.state.elements.find((element) => element.element_id === current.elementId);
+      return movedDraft ? { ...current, draft: movedDraft } : current;
+    });
     setGuides(preview.guides);
   }
 
   function commitMove() {
     const drag = dragRef.current;
     if (!drag) return;
-    commitCanvas(drag.last);
+    commitCanvas(drag.last, { preserveTextEdit: true });
     showNotice("对象位置已提交");
     setGuides([]);
     dragRef.current = undefined;
   }
 
   function marqueeSelect(rectangle: CanvasRect, append: boolean) {
+    finalizeTextHistory();
     const controller = controllerForCurrent();
     if (!controller) return;
     setSelectedIds(controller.marqueeSelect(rectangle, append || multiMode));
@@ -796,6 +872,7 @@ export function EditorPage({ projectId }: { projectId: string }) {
   }
 
   function clearSelection() {
+    finalizeTextHistory();
     elementControllerRef.current?.clearSelection();
     setSelectedIds([]);
     setCandidateMenu(undefined);
@@ -803,10 +880,7 @@ export function EditorPage({ projectId }: { projectId: string }) {
   }
 
   if (!project || !canvasState) return <main className="editor-loading" aria-live="polite">正在加载编辑器</main>;
-  const renderedCanvasState = textEdit ? {
-    ...canvasState,
-    elements: canvasState.elements.map((element) => element.element_id === textEdit.elementId ? textEdit.draft : element),
-  } : canvasState;
+  const renderedCanvasState = withTextDraft(canvasState, textEdit);
   const imageUrl = `/api/v1/private-assets/projects/${projectId}/images/${canvasState.background.asset_id ?? project.current_image_id ?? ""}`;
   const canEdit = saveStatus !== "conflicted";
   const selectedElements = renderedCanvasState.elements.filter((element) => selectedIds.includes(element.element_id));
@@ -883,7 +957,6 @@ export function EditorPage({ projectId }: { projectId: string }) {
             maxWidth: `min(720px, calc(${(canvasState.pixel_width / canvasState.pixel_height * 100).toFixed(4)}vh - ${(canvasState.pixel_width / canvasState.pixel_height * 168).toFixed(4)}px))`,
           }}>
             <EditorStage
-              assetId={canvasState.background.asset_id}
               canvasState={renderedCanvasState}
               fontStatuses={fontStatuses}
               guides={guides}
@@ -891,6 +964,7 @@ export function EditorPage({ projectId }: { projectId: string }) {
               onClearSelection={clearSelection}
               onCopy={copySelection}
               onDelete={deleteSelection}
+              onDragStart={() => setCandidateMenu(undefined)}
               onMarquee={marqueeSelect}
               onMoveCommit={commitMove}
               onMovePreview={previewMove}