registerTabPane(tab.id, element)}
+ data-tab-id={tab.id}
+ className={classNames('dashboard-tab-pane', {
+ 'dashboard-tab-pane-active': isActive,
+ 'dashboard-tab-pane-inactive': !isActive,
+ 'dashboard-tab-pane-capturing': isCapturing
+ })}
+ style={
+ isCapturing
+ ? {
+ '--dashboard-tab-capture-width': `${previewCaptureLayout.width}px`,
+ '--dashboard-tab-capture-height': `${previewCaptureLayout.height}px`
+ }
+ : undefined
}
aria-hidden={!isActive}
+ inert={!isActive && !isCapturing}
>
{
+ const previewHeight = typeof height === 'number' ? `${height}px` : height
+
+ if (!src) return null
+
+ return (
+
+ 
+
+ )
+}
+
+DashboardTabPreview.propTypes = {
+ src: PropTypes.string,
+ height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+
+export default DashboardTabPreview
diff --git a/src/components/Dashboard/common/DashboardTabs.jsx b/src/components/Dashboard/common/DashboardTabs.jsx
index fadabad2..8411faa8 100644
--- a/src/components/Dashboard/common/DashboardTabs.jsx
+++ b/src/components/Dashboard/common/DashboardTabs.jsx
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types'
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { Button, Flex, Typography } from 'antd'
+import { Button, Flex, Popover, Typography } from 'antd'
+import DashboardTabPreview from './DashboardTabPreview'
import classNames from 'classnames'
import ScrollBox from './ScrollBox'
import PlusIcon from '../../Icons/PlusIcon'
@@ -78,11 +79,75 @@ const DashboardTabItem = ({
onDrop,
onClose
}) => {
+ const { captureTabPreview } = useNavigationTabs()
+ const [previewOpen, setPreviewOpen] = useState(false)
+ const [previewSrc, setPreviewSrc] = useState(null)
+ const previewHoverRef = useRef(false)
+ const previewOpenRef = useRef(false)
+ const previewRequestRef = useRef(0)
+ const previewTargetRef = useRef(null)
const model = tab.modelName ? getModelByName(tab.modelName) : null
const Icon = model?.icon || HomeIcon
- return (
+ const closePreview = useCallback(() => {
+ previewHoverRef.current = false
+ previewOpenRef.current = false
+ previewRequestRef.current += 1
+ setPreviewOpen(false)
+ setPreviewSrc(null)
+ }, [])
+
+ const startPreviewCapture = useCallback(() => {
+ if (isSelected || isDragging) return
+
+ previewHoverRef.current = true
+ const requestId = previewRequestRef.current + 1
+ previewRequestRef.current = requestId
+ previewOpenRef.current = false
+ setPreviewOpen(false)
+ setPreviewSrc(null)
+
+ void captureTabPreview(tab.id).then((dataUrl) => {
+ if (
+ !previewHoverRef.current ||
+ previewRequestRef.current !== requestId ||
+ !dataUrl
+ ) {
+ return
+ }
+ if (
+ previewTargetRef.current &&
+ !previewTargetRef.current.matches(':hover')
+ ) {
+ return
+ }
+ setPreviewSrc(dataUrl)
+ previewOpenRef.current = true
+ setPreviewOpen(true)
+ })
+ }, [captureTabPreview, isDragging, isSelected, tab.id])
+
+ const handlePreviewOpenChange = useCallback(
+ (nextOpen) => {
+ if (!nextOpen) closePreview()
+ },
+ [closePreview]
+ )
+
+ const handlePreviewMouseLeave = useCallback(() => {
+ if (previewOpenRef.current) return
+ closePreview()
+ }, [closePreview])
+
+ useEffect(() => {
+ if (isSelected || isDragging) {
+ closePreview()
+ }
+ }, [closePreview, isDragging, isSelected])
+
+ const tabButton = (
)
+
+ if (isSelected) {
+ return tabButton
+ }
+
+ return (
+