From d09e5e673eb39698a293a406187ef329cdabf4dc Mon Sep 17 00:00:00 2001
From: Stringadmin <admin@omniai.net.cn>
Date: Fri, 5 Jun 2026 18:19:24 +0800
Subject: [PATCH] refactor: extract canvas marking popover

---
 src/features/canvas/CanvasMarkingPopover.tsx |  40 +++++++
 src/features/canvas/CanvasPage.tsx           | 117 ++++++-------------
 2 files changed, 75 insertions(+), 82 deletions(-)
 create mode 100644 src/features/canvas/CanvasMarkingPopover.tsx

diff --git a/src/features/canvas/CanvasMarkingPopover.tsx b/src/features/canvas/CanvasMarkingPopover.tsx
new file mode 100644
index 0000000..2c482af
--- /dev/null
+++ b/src/features/canvas/CanvasMarkingPopover.tsx
@@ -0,0 +1,40 @@
+interface CanvasMarkingPopoverProps {
+  value?: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  onClear: () => void;
+  onDone: () => void;
+}
+
+export function CanvasMarkingPopover({
+  value,
+  placeholder,
+  onChange,
+  onClear,
+  onDone,
+}: CanvasMarkingPopoverProps) {
+  return (
+    <div
+      className="studio-canvas-marking-popover"
+      onMouseDown={(event) => event.stopPropagation()}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <textarea
+        className="studio-canvas-marking-input"
+        placeholder={placeholder}
+        value={value || ""}
+        onChange={(event) => onChange(event.target.value)}
+      />
+      <div className="studio-canvas-marking-actions">
+        {value ? (
+          <button type="button" className="studio-canvas-marking-clear" onClick={onClear}>
+            清除
+          </button>
+        ) : null}
+        <button type="button" className="studio-canvas-marking-done" onClick={onDone}>
+          完成
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/canvas/CanvasPage.tsx b/src/features/canvas/CanvasPage.tsx
index c651b21..afb0b55 100644
--- a/src/features/canvas/CanvasPage.tsx
+++ b/src/features/canvas/CanvasPage.tsx
@@ -186,6 +186,7 @@ import {
 } from "./canvasWorkflowDeserialize";
 import { CanvasNodeToolbar, CanvasNodeVideoPlayer, CanvasSelectChip } from "./canvasComponents";
 import type { CanvasNodeToolbarAction } from "./canvasComponents";
+import { CanvasMarkingPopover } from "./CanvasMarkingPopover";
 import { CanvasPromptMentionTextarea, CanvasTextPromptComposer } from "./CanvasTextPromptComposer";
 import { CanvasMultiGridPanel, CanvasUpscalePanel, CanvasInpaintPanel } from "./canvasToolPanels";
 import { CanvasSmoothedProgressRing } from "./CanvasSmoothedProgressRing";
@@ -4472,47 +4473,23 @@ function CanvasPage({
                     >
                       <FileImageOutlined /><span>标记</span>
                     </button>
-                    {markingPopoverNodeId === imageNode.id && (
-                      <div
-                        className="studio-canvas-marking-popover"
-                        onMouseDown={(e) => e.stopPropagation()}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <textarea
-                          className="studio-canvas-marking-input"
-                          placeholder="描述标记内容，如：主角站在桥上，远处是城市天际线"
-                          value={imageNode.marking || ""}
-                          onChange={(e) => {
-                            const val = e.target.value;
-                            setImageNodes((nodes) =>
-                              nodes.map((n) => (n.id === imageNode.id ? { ...n, marking: val } : n)),
-                            );
-                          }}
-                        />
-                        <div className="studio-canvas-marking-actions">
-                          {imageNode.marking && (
-                            <button
-                              type="button"
-                              className="studio-canvas-marking-clear"
-                              onClick={() => {
-                                setImageNodes((nodes) =>
-                                  nodes.map((n) => (n.id === imageNode.id ? { ...n, marking: "" } : n)),
-                                );
-                              }}
-                            >
-                              清除
-                            </button>
-                          )}
-                          <button
-                            type="button"
-                            className="studio-canvas-marking-done"
-                            onClick={() => setMarkingPopoverNodeId(null)}
-                          >
-                            完成
-                          </button>
-                        </div>
-                      </div>
-                    )}
+                    {markingPopoverNodeId === imageNode.id ? (
+                      <CanvasMarkingPopover
+                        value={imageNode.marking}
+                        placeholder="描述标记内容，如：主角站在桥上，远处是城市天际线"
+                        onChange={(value) => {
+                          setImageNodes((nodes) =>
+                            nodes.map((node) => (node.id === imageNode.id ? { ...node, marking: value } : node)),
+                          );
+                        }}
+                        onClear={() => {
+                          setImageNodes((nodes) =>
+                            nodes.map((node) => (node.id === imageNode.id ? { ...node, marking: "" } : node)),
+                          );
+                        }}
+                        onDone={() => setMarkingPopoverNodeId(null)}
+                      />
+                    ) : null}
                     <button
                       type="button"
                       title="多宫格生成"
@@ -4843,47 +4820,23 @@ function CanvasPage({
                     >
                       运镜{videoNode.cameraMotion ? ` ${CAMERA_MOTION_PRESETS.find((p) => p.value === videoNode.cameraMotion)?.label || ""}` : ""}
                     </button>
-                    {markingPopoverNodeId === videoNode.id && (
-                      <div
-                        className="studio-canvas-marking-popover"
-                        onMouseDown={(e) => e.stopPropagation()}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <textarea
-                          className="studio-canvas-marking-input"
-                          placeholder="描述标记内容，如：主角在城市街头行走"
-                          value={videoNode.marking || ""}
-                          onChange={(e) => {
-                            const val = e.target.value;
-                            setVideoNodes((nodes) =>
-                              nodes.map((n) => (n.id === videoNode.id ? { ...n, marking: val } : n)),
-                            );
-                          }}
-                        />
-                        <div className="studio-canvas-marking-actions">
-                          {videoNode.marking && (
-                            <button
-                              type="button"
-                              className="studio-canvas-marking-clear"
-                              onClick={() => {
-                                setVideoNodes((nodes) =>
-                                  nodes.map((n) => (n.id === videoNode.id ? { ...n, marking: "" } : n)),
-                                );
-                              }}
-                            >
-                              清除
-                            </button>
-                          )}
-                          <button
-                            type="button"
-                            className="studio-canvas-marking-done"
-                            onClick={() => setMarkingPopoverNodeId(null)}
-                          >
-                            完成
-                          </button>
-                        </div>
-                      </div>
-                    )}
+                    {markingPopoverNodeId === videoNode.id ? (
+                      <CanvasMarkingPopover
+                        value={videoNode.marking}
+                        placeholder="描述标记内容，如：主角在城市街头行走"
+                        onChange={(value) => {
+                          setVideoNodes((nodes) =>
+                            nodes.map((node) => (node.id === videoNode.id ? { ...node, marking: value } : node)),
+                          );
+                        }}
+                        onClear={() => {
+                          setVideoNodes((nodes) =>
+                            nodes.map((node) => (node.id === videoNode.id ? { ...node, marking: "" } : node)),
+                          );
+                        }}
+                        onDone={() => setMarkingPopoverNodeId(null)}
+                      />
+                    ) : null}
                     {cameraMotionDropdownNodeId === videoNode.id && (
                       <div
                         className="studio-canvas-camera-dropdown"