React 模态框的拉伸和拖动

import { NodeExpandOutlined } from '@ant-design/icons';
import React, { useRef, useState } from 'react'; // 引入useState和useRef
import Draggable from 'react-draggable';
export default function Problem() {
  const [width, setWidth] = useState(400);
  const [height, setHeight] = useState(450);
  // 使用useRef保存调整大小时的宽度和高度
  const resizeRef = useRef({
    isResizing: false,
    newWidth: null,
    newHeight: null
  })
  const [tuod, setTuod] = useState(true)
  const handleResizeMouseDown = (resizeType, e) => {
    let x = e.pageX
    let y = e.pageY
    console.log(x, y);
    const parent = document.querySelector('.box_'); // 获取父级元素
    const parentRect = parent.getBoundingClientRect(); // 获取父级元素的位置信息
    const bleft = parentRect.left; // 获取父级元素相对于屏幕右边的坐标
    const btop = parentRect.top; // 获取父级元素的宽度
    const resizeFunction = resizeType === 'right'
      ? e => {
        if (x > e.pageX) {
          console.log('小');
          resizeRef.current.newWidth = e.pageX - e.target.getBoundingClientRect().left;
          resizeRef.current.isResizing = true;
        } else {
          console.log('大');
          resizeRef.current.newWidth = e.pageX - e.target.getBoundingClientRect().left - bleft;
          resizeRef.current.isResizing = true;
        }
      }
      : e => {
        if (y > e.pageY) {
          console.log('小');
          resizeRef.current.newHeight = e.pageY - e.target.getBoundingClientRect().top + 50;
          resizeRef.current.isResizing = true;
        } else {
          console.log('大');
          resizeRef.current.newHeight = e.pageY - e.target.getBoundingClientRect().top - btop + 50;
          resizeRef.current.isResizing = true;
        }
      };
    setTuod(false)
    const updateFunction = resizeType === 'right' ? setWidth : setHeight;
    const handleMouseUp = () => {
      setTuod(true)
      document.removeEventListener('mousemove', resizeFunction); //删除监听事件
      document.removeEventListener('mouseup', handleMouseUp);
      if (resizeRef.current.isResizing) { //当它修改成功后
        updateFunction(resizeType === 'right' ? resizeRef.current.newWidth : resizeRef.current.newHeight);
        resizeRef.current.isResizing = false;
      }
    };
    document.addEventListener('mousemove', resizeFunction);
    document.addEventListener('mouseup', handleMouseUp);
  };
  const [tdwidth, setTeidth] = useState(25);
  const [istou, setIstou] = useState(false)
  const tuoing = () => {
    setIstou(true)
  }
  const tuoed = () => {
    setIstou(false)
  }
  const [isshow, setIshow] = useState(true)
  return (
    <div className='problem' >
      <div style={{
        opacity: !isshow ? 0.5 : 1, pointerEvents:
          !isshow ? "none" : ""
      }}>
        <div>
          <h2 onClick={() => setIshow(!isshow)}>点击</h2>
        </div>
        <div>
          <p>www</p>
          <p>www</p>
          <p>www</p>
          <p>www</p>
        </div>
      </div>
      <Draggable axis="both" handle=".handle" defaultPosition={{ x: 0, y: 0 }} bounds=".problem" onDrag={tuoing} onStop={tuoed}>
        <div
          className="box_" style={{ display: isshow ? "none" : "", opacity: istou ? 0.8 : 1, backgroundColor: "white", position: "fixed", left: "200px", top: "100px", width: `${width}px`, height: `${height}px`, boxShadow: '0 0 5px 0px grey', userSelect: 'none' }}>
          <div className="handle">
            <span>用户模块管理</span>
            <span style={{ display: 'inline-block', float: "right", marginRight: "5px", fontSize: "20px" }} onClick={() => setIshow(true)}>x</span>
          </div>
          <div
            className='resize' style={{ position: 'absolute', top: 0, right: -1, width: '2px', height: '100%', cursor: 'e-resize' }}
            onMouseDown={(e) => handleResizeMouseDown('right', e)} />
          <div
            className='resizeBottom' style={{ position: 'absolute', bottom: 0, right: -1, width: '100%', height: '2px', cursor: 'n-resize' }}
            onMouseDown={(e) => handleResizeMouseDown('bottom', e)} />
          <div className='neirong'>
            <div style={{
              opacity: !tuod ? 0.3 : 1,
              display: istou ? "none" : ""
            }}>
              <h2>内容</h2>
            </div>
          </div>
        </div>
      </Draggable>
    </div>
  );
}

.content_home{
    height: 617px;
    width: 375px;
}
.footer{
    position: fixed;
    bottom: 0px;
    height: 50px;
    width: 375px;
}
.top{
    position: fixed;
    top: 0px;
    height: 50px;
    width: 375px;
}
.content {
    position: fixed;
    top: 50px;
    height: 567px;
    width: 375px;
    overflow-y: auto;
}
.content::-webkit-scrollbar {
    display: none;
}
.problem{
    position: fixed;
    top: 50px;
    height: 567px;
    width: 100vw;
    overflow-y: auto;
}
.handle{
    background-color: #6c95db;
    color: white;
    height: 35px;
    line-height: 35px;
    text-indent: 1em;
    cursor: move;
}