fix

src/components/CommitInput.tsx

@@ -25,6 +25,12 @@ export const CommitInput: React.FC<CommitInputProps> = ({
 }) => {
   const [localVal, setLocalVal] = useState<string>(String(value));
   const focusedRef = useRef(false);
+  const localValRef = useRef(localVal);
+  const valueRef = useRef(value);
+  const onCommitRef = useRef(onCommit);
+  localValRef.current = localVal;
+  valueRef.current = value;
+  onCommitRef.current = onCommit;
 
   useEffect(() => {
     if (!focusedRef.current) {
@@ -32,12 +38,27 @@ export const CommitInput: React.FC<CommitInputProps> = ({
     }
   }, [value]);
 
+  useEffect(() => {
+    return () => {
+      if (
+        focusedRef.current &&
+        localValRef.current !== String(valueRef.current)
+      ) {
+        onCommitRef.current(localValRef.current);
+      }
+    };
+  }, []);
+
+  const commitIfChanged = () => {
+    if (localValRef.current !== String(valueRef.current)) {
+      onCommitRef.current(localValRef.current);
+    }
+  };
+
   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     focusedRef.current = false;
     onBlur?.(e);
-    if (localVal !== String(value)) {
-      onCommit(localVal);
-    }
+    commitIfChanged();
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

src/components/LabelDesigner.tsx

@@ -73,6 +73,17 @@ const MARQUEE_MIN_PX = 4;
 const DRAG_START_THRESHOLD_PX = 4;
 const MODERATE_ZOOM_MAX = 2.0;
 
+function blurActiveField() {
+  const active = document.activeElement;
+  if (
+    active instanceof HTMLInputElement ||
+    active instanceof HTMLTextAreaElement ||
+    active instanceof HTMLSelectElement
+  ) {
+    active.blur();
+  }
+}
+
 function rectFullyContains(
   outer: { left: number; top: number; right: number; bottom: number },
   inner: { left: number; top: number; right: number; bottom: number }
@@ -445,7 +456,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
 
       if (isTiny) {
         if (!state.additive) {
-          onSelectElements([]);
+          requestAnimationFrame(() => onSelectElements([]));
         }
         return;
       }
@@ -618,6 +629,8 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
     const canvas = canvasRef.current;
     if (!canvas) return;
 
+    blurActiveField();
+
     const rect = canvas.getBoundingClientRect();
     const startX = e.clientX - rect.left;
     const startY = e.clientY - rect.top;
@@ -814,7 +827,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
               return;
             }
             if (e.target === e.currentTarget) {
-              onSelectElements([]);
+              requestAnimationFrame(() => onSelectElements([]));
             }
           }}
         >

src/components/PropSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { LabelTemplate, TemplateElement, PaperConfig, VisibilityRule } from '../types';
 import {
   extractTemplateVariables,
@@ -101,14 +101,35 @@ interface PropTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAr
 
 const PropTextarea: React.FC<PropTextareaProps> = ({ value, onCommit, ...props }) => {
   const [localVal, setLocalVal] = useState<string>(value);
+  const focusedRef = useRef(false);
+  const localValRef = useRef(localVal);
+  const valueRef = useRef(value);
+  const onCommitRef = useRef(onCommit);
+  localValRef.current = localVal;
+  valueRef.current = value;
+  onCommitRef.current = onCommit;
 
   useEffect(() => {
+    if (!focusedRef.current) {
       setLocalVal(value);
+    }
   }, [value]);
 
+  useEffect(() => {
+    return () => {
+      if (
+        focusedRef.current &&
+        localValRef.current !== valueRef.current
+      ) {
+        onCommitRef.current(localValRef.current);
+      }
+    };
+  }, []);
+
   const handleBlur = () => {
-    if (localVal !== value) {
-      onCommit(localVal);
+    focusedRef.current = false;
+    if (localValRef.current !== valueRef.current) {
+      onCommitRef.current(localValRef.current);
     }
   };
 
@@ -117,6 +138,9 @@ const PropTextarea: React.FC<PropTextareaProps> = ({ value, onCommit, ...props }
       {...props}
       value={localVal}
       onChange={(e) => setLocalVal(e.target.value)}
+      onFocus={() => {
+        focusedRef.current = true;
+      }}
       onBlur={handleBlur}
     />
   );
@@ -722,7 +746,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                   </div>
                   <p className="text-[10px] text-[#777] leading-normal flex items-center gap-1 bg-[#1e1e1e] p-2 border border-[#3a3a3a]">
                     <HelpCircle className="w-3.5 h-3.5 text-[#31a8ff] shrink-0" />
-                    <span>点击画布元素以编辑属性，或在下方图层面板中选择。</span>
+                    <span>选中元素以编辑属性</span>
                   </p>
                 </div>
               </div>