refactor: extract canvas marking popover

2026-06-05 18:19:24 +08:00
parent d68064f529
commit d09e5e673e
2 changed files with 75 additions and 82 deletions
@@ -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>
+  );
+}