estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Optimize the workspace panel width calculation (#22195)

Browse Source
This commit is contained in:
GuanMu
2025-07-11 19:12:12 +08:00
committed by GitHub
parent 5f9628e027
commit f193e9764e
3 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/app/components/workflow/panel/workflow-preview.tsx
View File

@@ -32,6 +32,9 @@ const WorkflowPreview = () => {
const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
const workflowRunningData = useStore(s => s.workflowRunningData)
const showInputsPanel = useStore(s => s.showInputsPanel)
const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
const panelWidth = useStore(s => s.previewPanelWidth)
const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
const [currentTab, setCurrentTab] = useState<string>(showInputsPanel ? 'INPUT' : 'TRACING')
@@ -49,7 +52,6 @@ const WorkflowPreview = () => {
switchTab('DETAIL')
}, [workflowRunningData])
const [panelWidth, setPanelWidth] = useState(420)
const [isResizing, setIsResizing] = useState(false)
const startResizing = useCallback((e: React.MouseEvent) => {
@@ -64,10 +66,14 @@ const WorkflowPreview = () => {
const resize = useCallback((e: MouseEvent) => {
if (isResizing) {
const newWidth = window.innerWidth - e.clientX
if (newWidth > 420 && newWidth < 1024)
setPanelWidth(newWidth)
// width constraints: 400 <= width <= maxAllowed (canvas - reserved 400)
const reservedCanvasWidth = 400
const maxAllowed = workflowCanvasWidth ? (workflowCanvasWidth - reservedCanvasWidth) : 1024
if (newWidth >= 400 && newWidth <= maxAllowed)
setPreviewPanelWidth(newWidth)
}
}, [isResizing])
}, [isResizing, workflowCanvasWidth, setPreviewPanelWidth])
useEffect(() => {
window.addEventListener('mousemove', resize)
@@ -79,9 +85,9 @@ const WorkflowPreview = () => {
}, [resize, stopResizing])
return (
<div className={`
relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl
`}
<div className={
'relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
}
style={{ width: `${panelWidth}px` }}
>
<div