fix: 修复发送图片按回车时会同时触发发送消息的bug

web/src/components/modals/ImageUploadPreviewer.tsx

@@ -20,13 +20,20 @@ export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
       }
     }, [props.onConfirm]);
 
-    useGlobalKeyDown((e) => {
+    useGlobalKeyDown(
+      (e) => {
         if (isEnterHotkey(e)) {
+          e.stopPropagation();
           handleConfirm();
         } else if (isEscHotkey(e)) {
+          e.stopPropagation();
           props.onCancel();
         }
-    });
+      },
+      {
+        capture: true,
+      }
+    );
 
     return (
       <ModalWrapper style={{ maxHeight: '60vh', maxWidth: '60vw' }}>

web/src/hooks/useGlobalKeyDown.ts

@@ -5,7 +5,10 @@ import { useUpdateRef } from 'tailchat-shared';
  * keydown hooks
  * 仅接受最初的函数
  */
-export function useGlobalKeyDown(fn: (e: KeyboardEvent) => void) {
+export function useGlobalKeyDown(
+  fn: (e: KeyboardEvent) => void,
+  options?: AddEventListenerOptions
+) {
   const fnRef = useUpdateRef(fn);
 
   useLayoutEffect(() => {
@@ -13,10 +16,10 @@ export function useGlobalKeyDown(fn: (e: KeyboardEvent) => void) {
       typeof fnRef.current === 'function' && fnRef.current(e);
     };
 
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keydown', handleKeyDown, options);
 
     return () => {
-      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keydown', handleKeyDown, options);
     };
   }, []);
 }