62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { PlayCircleOutlined, CloseOutlined } from '@ant-design/icons';
|
|
import React, { useRef } from 'react';
|
|
import Draggable from 'react-draggable';
|
|
import clsx from 'clsx';
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
defaultPosition?: { x: number; y: number };
|
|
// 新增
|
|
title: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const DraggableBox: React.FC<Props> = ({
|
|
children,
|
|
defaultPosition = { x: 0, y: 0 },
|
|
title,
|
|
onClose,
|
|
}) => {
|
|
const nodeRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
return (
|
|
<Draggable
|
|
nodeRef={nodeRef}
|
|
defaultPosition={defaultPosition}
|
|
handle=".drag-header" // 仅标题栏可拖拽，内容区不触发拖拽
|
|
>
|
|
<div
|
|
ref={nodeRef}
|
|
className={clsx(
|
|
'fixed select-none z-[9999] bg-white shadow-xl rounded-lg overflow-hidden',
|
|
'border-[8px] border-slate-200 top-[8px] right-[8px] w-[800px] h-[580px] ' // 整体8px外边框
|
|
)}
|
|
>
|
|
{/* 拖拽标题栏 + 关闭按钮 */}
|
|
<div className="drag-header flex items-center justify-between px-4 py-3 bg-slate-100 cursor-move border-b border-slate-200">
|
|
<div className="flex items-center gap-2">
|
|
<PlayCircleOutlined className="text-slate-600" />
|
|
<span className="font-semibold text-slate-800">{title}</span>
|
|
</div>
|
|
{/* 关闭按钮，阻止拖拽冒泡 */}
|
|
<div
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onClose();
|
|
}}
|
|
className="w-6 h-6 flex items-center justify-center rounded hover:bg-red-100 cursor-pointer transition-colors"
|
|
>
|
|
<CloseOutlined className="text-slate-500 hover:text-red-500" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* 传入的视频内容 */}
|
|
<div style={{ height: 'calc(100% - 50px)', width: '100%' }}>
|
|
{children}</div>
|
|
</div>
|
|
</Draggable>
|
|
);
|
|
};
|
|
|
|
export default DraggableBox;
|