feat(components): add BlockingOverlay component for modal interactions

Introduce a new BlockingOverlay component to handle modal overlays with click handling and visibility control. The component includes click event propagation prevention and supports custom styling through className.

packages/ui/src/components/index.ts

@@ -87,6 +87,8 @@ export { HelpTooltip, type IconTooltipProps, InfoTooltip, WarnTooltip } from './
 export { default as ImageToolButton } from './interactive/ImageToolButton'
 // Sortable
 export { Sortable } from './interactive/Sortable'
+// BlockingOverlay
+export { BlockingOverlay } from './interactive/BlockingOverlay'
 
 // Composite Components (复合组件)
 // 暂无复合组件

packages/ui/src/components/interactive/BlockingOverlay/index.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@heroui/react'
+import type { ReactNode } from 'react'
+import React, { useCallback } from 'react'
+
+// 定义组件的 props 类型
+interface BlockingOverlayProps {
+  isVisible: boolean
+  onClick?: () => void
+  children?: ReactNode
+  className?: string
+}
+
+export const BlockingOverlay = ({ isVisible, onClick, children, className }: BlockingOverlayProps) => {
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      event.preventDefault()
+      if (onClick) {
+        onClick()
+      }
+    },
+    [onClick]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0',
+        'bg-black/50',
+        'z-[9999]',
+        'flex items-center justify-center',
+        'pointer-events-auto',
+        className
+      )}
+      onClick={handleClick}>
+      {children}
+    </div>
+  )
+}