opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 18:27:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve variable picker text width allocation (#35587)

Browse Source 
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
This commit is contained in:
非法操作 2026-04-27 14:07:03 +08:00 committed by GitHub
parent 6c089cab66
commit 4036515abe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.helpers.spec.ts
View File

@ -182,6 +182,16 @@ describe('var-reference-picker.helpers', () => {
maxVarNameWidth: expect.any(Number),
})
expect(getWidthAllocations(240, '', 'sys.user_id', 'String')).toEqual({
maxNodeNameWidth: 0,
maxTypeWidth: 64,
maxVarNameWidth: 119,
})
expect(getWidthAllocations(240, 'User Input', 'aa', 'String')).toMatchObject({
maxVarNameWidth: 16,
})
expect(getTooltipContent(true, true, true)).toBe('full-path')
expect(getTooltipContent(true, false, false)).toBe('invalid-variable')
expect(getTooltipContent(false, false, true)).toBeNull()

8
web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.helpers.ts
View File

@ -168,11 +168,15 @@ export const getWidthAllocations = (
) => {
const availableWidth = triggerWidth - 56
const totalTextLength = (nodeTitle + varName + type).length || 1
const priorityWidth = 15
const priorityWidth = nodeTitle ? 15 : 0
const minVarNameWidth = varName ? 16 : 0
return {
maxNodeNameWidth: priorityWidth + Math.floor(nodeTitle.length / totalTextLength * availableWidth),
maxTypeWidth: Math.floor(type.length / totalTextLength * availableWidth),
maxVarNameWidth: -priorityWidth + Math.floor(varName.length / totalTextLength * availableWidth),
maxVarNameWidth: Math.max(
minVarNameWidth,
-priorityWidth + Math.floor(varName.length / totalTextLength * availableWidth),
),
}
}

6
web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
View File

@ -279,13 +279,15 @@ const VarReferencePicker: FC<Props> = ({
[outputVarNode?.type, varName],
)
const showErrorIcon = hasValue && !isValidVar
const shouldShowNodeName = isShowNodeName && !isEnv && !isChatVar && !isGlobal && !isRagVar
const visibleNodeTitle = shouldShowNodeName ? outputVarNode?.title || '' : ''
// 8(left/right-padding) + 14(icon) + 4 + 14 + 2 = 42 + 17 buff
const {
maxNodeNameWidth,
maxTypeWidth,
maxVarNameWidth,
} = getWidthAllocations(triggerWidth, outputVarNode?.title || '', varName || '', type || '')
} = getWidthAllocations(triggerWidth, visibleNodeTitle, varName || '', type || '')
const hoverPopup = useMemo<HoverPopup | null>(() => {
const tooltipType = getTooltipContent(hasValue, isShowAPart, isValidVar)
@ -380,7 +382,7 @@ const VarReferencePicker: FC<Props> = ({
isJustShowValue={isJustShowValue}
isLoading={isLoading}
isShowAPart={isShowAPart}
isShowNodeName={isShowNodeName && !isEnv && !isChatVar && !isGlobal && !isRagVar}
isShowNodeName={shouldShowNodeName}
isSupportConstantValue={isSupportConstantValue}
maxNodeNameWidth={maxNodeNameWidth}
maxTypeWidth={maxTypeWidth}