优化预览与导出排版

src/components/PropSidebar.tsx

@@ -19,6 +19,7 @@ import {
 } from '../elementAlign';
 import type { ElementSide } from '../types';
 import { CollapsiblePanelSection } from './CollapsiblePanelSection';
+import { CommitInput } from './CommitInput';
 import {
   Sliders,
   LayoutGrid,
@@ -90,40 +91,7 @@ const AlignToolButton: React.FC<AlignToolButtonProps> = ({ icon, label, title, o
   </button>
 );
 
-interface PropInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-  value: string | number;
-  onCommit: (val: string) => void;
-}
-
-const PropInput: React.FC<PropInputProps> = ({ value, onCommit, ...props }) => {
-  const [localVal, setLocalVal] = useState<string>(String(value));
-
-  useEffect(() => {
-    setLocalVal(String(value));
-  }, [value]);
-
-  const handleBlur = () => {
-    if (localVal !== String(value)) {
-      onCommit(localVal);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      (e.target as HTMLInputElement).blur();
-    }
-  };
-
-  return (
-    <input
-      {...props}
-      value={localVal}
-      onChange={(e) => setLocalVal(e.target.value)}
-      onBlur={handleBlur}
-      onKeyDown={handleKeyDown}
-    />
-  );
-};
+const PropInput = CommitInput;
 
 interface PropTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
   value: string;