mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-12 13:59:06 +08:00
feat: add resize debug panel width (#17427)
This commit is contained in:
parent
31a6aabfe5
commit
dcb8939c7f
@ -1,5 +1,7 @@
|
|||||||
import {
|
import {
|
||||||
memo,
|
memo,
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from 'react'
|
} from 'react'
|
||||||
@ -51,12 +53,46 @@ const DebugAndPreview = () => {
|
|||||||
exactMatch: true,
|
exactMatch: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const [panelWidth, setPanelWidth] = useState(420)
|
||||||
|
const [isResizing, setIsResizing] = useState(false)
|
||||||
|
|
||||||
|
const startResizing = useCallback((e: React.MouseEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setIsResizing(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const stopResizing = useCallback(() => {
|
||||||
|
setIsResizing(false)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const resize = useCallback((e: MouseEvent) => {
|
||||||
|
if (isResizing) {
|
||||||
|
const newWidth = window.innerWidth - e.clientX
|
||||||
|
if (newWidth > 420 && newWidth < 1024)
|
||||||
|
setPanelWidth(newWidth)
|
||||||
|
}
|
||||||
|
}, [isResizing])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener('mousemove', resize)
|
||||||
|
window.addEventListener('mouseup', stopResizing)
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('mousemove', resize)
|
||||||
|
window.removeEventListener('mouseup', stopResizing)
|
||||||
|
}
|
||||||
|
}, [resize, stopResizing])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex h-full w-[420px] flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
|
'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
|
||||||
)}
|
)}
|
||||||
|
style={{ width: `${panelWidth}px` }}
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
|
||||||
|
onMouseDown={startResizing}
|
||||||
|
/>
|
||||||
<div className='system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary'>
|
<div className='system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary'>
|
||||||
<div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
|
<div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
|
||||||
<div className='flex items-center gap-1'>
|
<div className='flex items-center gap-1'>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user