optimize dragmodal code

src/ui/Duel/checkCardModal.tsx

-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import {
@@ -32,18 +32,7 @@ const CheckCardModal = () => {
   const cancelResponse = useAppSelector(selectCheckCardModalCacnelResponse);
   const [response, setResponse] = useState<number[]>([]);
   const defaultValue: number[] = [];
-  // Draggable 相关
-  const [draggable, setDraggable] = useState(false);
-  const draggleRef = useRef<HTMLDivElement>(null);
 
-  const onMouseOver = () => {
-    if (draggable) {
-      setDraggable(false);
-    }
-  };
-  const onMouseOut = () => {
-    setDraggable(true);
-  };
   // TODO: 这里可以考虑更好地封装
   const sendResponseHandler = (
     handlerName: string | undefined,
@@ -65,51 +54,43 @@ const CheckCardModal = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: `请选择${min}到${max}张卡片`,
-        open: isOpen,
-        closable: false,
-        footer: (
-          <>
+      title={`请选择${min}到${max}张卡片`}
+      open={isOpen}
+      closable={false}
+      footer={
+        <>
+          <Button
+            disabled={response.length < min || response.length > max}
+            onClick={() => {
+              sendResponseHandler(onSubmit, response);
+              dispatch(setCheckCardModalIsOpen(false));
+              dispatch(resetCheckCardModal());
+            }}
+            onFocus={() => {}}
+            onBlur={() => {}}
+          >
+            submit
+          </Button>
+          {cancelAble ? (
             <Button
-              disabled={response.length < min || response.length > max}
               onClick={() => {
-                sendResponseHandler(onSubmit, response);
+                if (cancelResponse) {
+                  sendResponseHandler(onSubmit, [cancelResponse]);
+                }
                 dispatch(setCheckCardModalIsOpen(false));
                 dispatch(resetCheckCardModal());
               }}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
               onFocus={() => {}}
               onBlur={() => {}}
             >
-              submit
+              cancel
             </Button>
-            {cancelAble ? (
-              <Button
-                onClick={() => {
-                  if (cancelResponse) {
-                    sendResponseHandler(onSubmit, [cancelResponse]);
-                  }
-                  dispatch(setCheckCardModalIsOpen(false));
-                  dispatch(resetCheckCardModal());
-                }}
-                onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
-                onFocus={() => {}}
-                onBlur={() => {}}
-              >
-                cancel
-              </Button>
-            ) : (
-              <></>
-            )}
-          </>
-        ),
-        width: 800,
-      }}
-      dragRef={draggleRef}
-      draggable={draggable}
+          ) : (
+            <></>
+          )}
+        </>
+      }
+      width={800}
     >
       <CheckCard.Group
         multiple
@@ -146,8 +127,6 @@ const CheckCardModal = () => {
                             style={{ width: 100 }}
                           />
                         }
-                        onMouseEnter={onMouseOver}
-                        onMouseLeave={onMouseOut}
                         value={option.response}
                       />
                     </Popover>

src/ui/Duel/checkCardModalV2.tsx

-import React, { useRef, useState } from "react";
+import React from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button, Card, Row, Col } from "antd";
@@ -32,18 +32,7 @@ const CheckCardModalV2 = () => {
   );
   const selectedOptions = useAppSelector(selectCheckCardModalV2SelectedOptions);
   const responseable = useAppSelector(selectCheckCardModalV2ResponseAble);
-  // Draggable 相关
-  const [draggable, setDraggable] = useState(false);
-  const draggleRef = useRef<HTMLDivElement>(null);
 
-  const onMouseOver = () => {
-    if (draggable) {
-      setDraggable(false);
-    }
-  };
-  const onMouseOut = () => {
-    setDraggable(true);
-  };
   const onFinish = () => {
     sendSelectUnselectCardResponse({ cancel_or_finish: true });
     dispatch(setCheckCardModalV2IsOpen(false));
@@ -57,34 +46,20 @@ const CheckCardModalV2 = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: `请选择未选择的卡片，最少${min}张，最多${max}张`,
-        open: isOpen,
-        closable: false,
-        footer: (
-          <>
-            <Button
-              disabled={!finishable || !responseable}
-              onClick={onFinish}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-            >
-              finish
-            </Button>
-            <Button
-              disabled={!cancelable || !responseable}
-              onClick={onCancel}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-            >
-              cancel
-            </Button>
-          </>
-        ),
-        width: 800,
-      }}
-      dragRef={draggleRef}
-      draggable={draggable}
+      title={`请选择未选择的卡片，最少${min}张，最多${max}张`}
+      open={isOpen}
+      closable={false}
+      footer={
+        <>
+          <Button disabled={!finishable || !responseable} onClick={onFinish}>
+            finish
+          </Button>
+          <Button disabled={!cancelable || !responseable} onClick={onCancel}>
+            cancel
+          </Button>
+        </>
+      }
+      width={800}
     >
       <CheckCard.Group
         bordered
@@ -114,8 +89,6 @@ const CheckCardModalV2 = () => {
                     />
                   }
                   value={option.response}
-                  onMouseEnter={onMouseOver}
-                  onMouseLeave={onMouseOut}
                 />
               </Col>
             );

src/ui/Duel/checkCardModalV3.tsx

-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button, Card, Row, Col } from "antd";
@@ -32,18 +32,7 @@ const CheckCardModalV3 = () => {
     .concat(selectedOptions)
     .map((option) => option.level2)
     .reduce((sum, current) => sum + current, 0);
-  // Draggable 相关
-  const [draggable, setDraggable] = useState(false);
-  const draggleRef = useRef<HTMLDivElement>(null);
 
-  const onMouseOver = () => {
-    if (draggable) {
-      setDraggable(false);
-    }
-  };
-  const onMouseOut = () => {
-    setDraggable(true);
-  };
   const responseable =
     (overflow
       ? Level1Sum >= LevelSum || Level2Sum >= LevelSum
@@ -61,26 +50,17 @@ const CheckCardModalV3 = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: `请选择卡片，最少${min}张，最多${max}张`,
-        open: isOpen,
-        closable: false,
-        footer: (
-          <>
-            <Button
-              disabled={!responseable}
-              onClick={onFinish}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-            >
-              finish
-            </Button>
-          </>
-        ),
-        width: 800,
-      }}
-      dragRef={draggleRef}
-      draggable={draggable}
+      title={`请选择卡片，最少${min}张，最多${max}张`}
+      open={isOpen}
+      closable={false}
+      footer={
+        <>
+          <Button disabled={!responseable} onClick={onFinish}>
+            finish
+          </Button>
+        </>
+      }
+      width={800}
     >
       <CheckCard.Group
         bordered
@@ -107,8 +87,6 @@ const CheckCardModalV3 = () => {
                     />
                   }
                   value={option}
-                  onMouseEnter={onMouseOver}
-                  onMouseLeave={onMouseOut}
                 />
               </Col>
             );

src/ui/Duel/checkCounterModal.tsx

 import { Button, Row, Col, Card, InputNumber } from "antd";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { sendSelectCounterResponse } from "../../api/ocgcore/ocgHelper";
 import { fetchStrings } from "../../api/strings";
 import { useAppSelector } from "../../hook";
@@ -19,7 +19,6 @@ const CheckCounterModal = () => {
   const [selected, setSelected] = useState(new Array(options.length));
   const sum = selected.reduce((sum, current) => sum + current, 0);
   const finishable = sum == min;
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   const onFinish = () => {
     sendSelectCounterResponse(selected);
@@ -28,18 +27,14 @@ const CheckCounterModal = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: `请移除${min}个${counterName}`,
-        open: isOpen,
-        closable: false,
-        footer: (
-          <Button disabled={!finishable} onClick={onFinish}>
-            finish
-          </Button>
-        ),
-      }}
-      dragRef={draggleRef}
-      draggable={true}
+      title={`请移除${min}个${counterName}`}
+      open={isOpen}
+      closable={false}
+      footer={
+        <Button disabled={!finishable} onClick={onFinish}>
+          finish
+        </Button>
+      }
     >
       <Row>
         {options.map((option, idx) => {

src/ui/Duel/dragModal.tsx

 // 经过封装的可拖拽`Modal`
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import type { DraggableData, DraggableEvent } from "react-draggable";
 import Draggable from "react-draggable";
 import { Modal, ModalProps } from "antd";
 
-export interface DragModalProps {
-  modalProps: ModalProps;
-  dragRef: React.RefObject<HTMLDivElement>;
-  draggable: boolean;
-  children?: React.ReactNode;
-}
+export interface DragModalProps extends ModalProps {}
 
 const DragModal = (props: DragModalProps) => {
+  const dragRef = useRef<HTMLDivElement>(null);
   const [bounds, setBounds] = useState({
     left: 0,
     top: 0,
@@ -20,7 +16,7 @@ const DragModal = (props: DragModalProps) => {
   });
   const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
     const { clientWidth, clientHeight } = window.document.documentElement;
-    const targetRect = props.dragRef.current?.getBoundingClientRect();
+    const targetRect = dragRef.current?.getBoundingClientRect();
     if (!targetRect) {
       return;
     }
@@ -34,14 +30,10 @@ const DragModal = (props: DragModalProps) => {
 
   return (
     <Modal
-      {...props.modalProps}
+      {...props}
       modalRender={(modal) => (
-        <Draggable
-          disabled={!props.draggable}
-          bounds={bounds}
-          onStart={onStart}
-        >
-          <div ref={props.dragRef}>{modal}</div>
+        <Draggable bounds={bounds} onStart={onStart}>
+          <div ref={dragRef}>{modal}</div>
         </Draggable>
       )}
     >

src/ui/Duel/optionModal.tsx

-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button } from "antd";
@@ -19,31 +19,26 @@ const OptionModal = () => {
   const isOpen = useAppSelector(selectOptionModalIsOpen);
   const options = useAppSelector(selectOptionModalOptions);
   const [selected, setSelected] = useState<number | undefined>(undefined);
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
     <DragModal
-      modalProps={{
-        title: "请选择需要发动的效果",
-        open: isOpen,
-        closable: false,
-        footer: (
-          <Button
-            disabled={selected === undefined}
-            onClick={() => {
-              if (selected !== undefined) {
-                sendSelectOptionResponse(selected);
-                dispatch(setOptionModalIsOpen(false));
-                dispatch(resetOptionModal());
-              }
-            }}
-          >
-            submit
-          </Button>
-        ),
-      }}
-      dragRef={draggleRef}
-      draggable={true}
+      title="请选择需要发动的效果"
+      open={isOpen}
+      closable={false}
+      footer={
+        <Button
+          disabled={selected === undefined}
+          onClick={() => {
+            if (selected !== undefined) {
+              sendSelectOptionResponse(selected);
+              dispatch(setOptionModalIsOpen(false));
+              dispatch(resetOptionModal());
+            }
+          }}
+        >
+          submit
+        </Button>
+      }
     >
       <CheckCard.Group
         bordered

src/ui/Duel/positionModal.tsx

-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button } from "antd";
@@ -22,31 +22,26 @@ const PositionModal = () => {
   const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
     undefined
   );
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
     <DragModal
-      modalProps={{
-        title: "请选择表示形式",
-        open: isOpen,
-        closable: false,
-        footer: (
-          <Button
-            disabled={selected === undefined}
-            onClick={() => {
-              if (selected !== undefined) {
-                sendSelectPositionResponse(selected);
-                dispatch(setPositionModalIsOpen(false));
-                dispatch(resetPositionModal());
-              }
-            }}
-          >
-            submit
-          </Button>
-        ),
-      }}
-      dragRef={draggleRef}
-      draggable={true}
+      title="请选择表示形式"
+      open={isOpen}
+      closable={false}
+      footer={
+        <Button
+          disabled={selected === undefined}
+          onClick={() => {
+            if (selected !== undefined) {
+              sendSelectPositionResponse(selected);
+              dispatch(setPositionModalIsOpen(false));
+              dispatch(resetPositionModal());
+            }
+          }}
+        >
+          submit
+        </Button>
+      }
     >
       <CheckCard.Group
         bordered

src/ui/Duel/sortCardModal.tsx

-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   DndContext,
   closestCenter,
@@ -38,7 +38,6 @@ const SortCardModal = () => {
       coordinateGetter: sortableKeyboardCoordinates,
     })
   );
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   const onFinish = () => {
     sendSortCardResponse(items.map((item) => item.response));
@@ -63,14 +62,10 @@ const SortCardModal = () => {
 
   return (
     <DragModal
-      modalProps={{
-        title: "请为下列卡牌排序",
-        open: isOpen,
-        closable: false,
-        footer: <Button onClick={onFinish}>finish</Button>,
-      }}
-      dragRef={draggleRef}
-      draggable={false}
+      title="请为下列卡牌排序"
+      open={isOpen}
+      closable={false}
+      footer={<Button onClick={onFinish}>finish</Button>}
     >
       <DndContext
         sensors={sensors}

src/ui/Duel/yesNoModal.tsx

-import React, { useRef } from "react";
+import React from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import { Button } from "antd";
@@ -14,38 +14,32 @@ const YesNoModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectYesNoModalIsOpen);
   const msg = useAppSelector(selectYesNOModalMsg);
-  // Draggable 相关
-  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
     <DragModal
-      modalProps={{
-        title: msg,
-        open: isOpen,
-        closable: false,
-        footer: (
-          <>
-            <Button
-              onClick={() => {
-                sendSelectEffectYnResponse(true);
-                dispatch(setYesNoModalIsOpen(false));
-              }}
-            >
-              Yes
-            </Button>
-            <Button
-              onClick={() => {
-                sendSelectEffectYnResponse(false);
-                dispatch(setYesNoModalIsOpen(false));
-              }}
-            >
-              No
-            </Button>
-          </>
-        ),
-      }}
-      dragRef={draggleRef}
-      draggable={true}
+      title={msg}
+      open={isOpen}
+      closable={false}
+      footer={
+        <>
+          <Button
+            onClick={() => {
+              sendSelectEffectYnResponse(true);
+              dispatch(setYesNoModalIsOpen(false));
+            }}
+          >
+            Yes
+          </Button>
+          <Button
+            onClick={() => {
+              sendSelectEffectYnResponse(false);
+              dispatch(setYesNoModalIsOpen(false));
+            }}
+          >
+            No
+          </Button>
+        </>
+      }
     />
   );
 };