opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(draggable-plugin, hitl-input, human-input): update styles and improve layout for better UI consistency

This commit is contained in:
twwu 2026-01-12 14:51:48 +08:00
parent 68885afac6
commit 57c33d5869
4 changed files with 59 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
View File

@ -61,7 +61,7 @@ export default function DraggableBlockPlugin({
menuComponent={
isSupportDrag
? (
<div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-[24px] top-[16px] cursor-grab opacity-0 will-change-transform active:cursor-move')}>
<div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-6 top-4 cursor-grab opacity-0 will-change-transform active:cursor-move')}>
<RiDraggable className="size-3.5 text-text-tertiary" />
</div>
)
@ -74,7 +74,7 @@ export default function DraggableBlockPlugin({
// style={{ width: 500 }} // width not worked here
>
<div
className="absolute left-0 right-[-40px] top-0 h-[2px] bg-text-accent-secondary"
className="absolute -right-10 left-0 top-0 h-[2px] bg-text-accent-secondary"
>
</div>
</div>

2
web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
View File

@ -129,7 +129,7 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
{/* Actions */}
{!readonly && (
<div className="hidden h-full shrink-0 items-center space-x-1 pr-[24px] group-hover:flex">
<div className="hidden h-full shrink-0 items-center space-x-1 pr-8 group-hover:flex">
<div className="flex h-full items-center" ref={editBtnRef}>
<ActionButton size="s">
<RiEditLine className="size-4 text-text-tertiary" />

90
web/app/components/workflow/nodes/human-input/components/form-content.tsx
View File

@ -105,47 +105,55 @@ const FormContent: FC<FormContentProps> = ({
}, {})
return (
<div className={cn('flex grow flex-col rounded-[10px] border border-components-input-bg-normal bg-components-input-bg-normal pt-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active', !isFocus && 'pb-[32px]')}>
<PromptEditor
key={editorKey}
value={value}
onChange={onChange}
className={cn('min-h-[80px] ', isExpand && 'h-full')}
wrapperClassName={cn('max-h-[300px] overflow-y-auto px-3', isExpand && 'h-0 max-h-full grow')}
onFocus={setFocus}
onBlur={setBlur}
hitlInputBlock={{
show: true,
formInputs,
nodeId,
onFormInputsChange,
onFormInputItemRename,
onFormInputItemRemove,
variables: availableVars || [],
workflowNodesMap,
getVarType,
readonly,
}}
workflowVariableBlock={{
show: true,
variables: availableVars || [],
getVarType: getVarType as any,
workflowNodesMap,
}}
editable={!readonly}
shortcutPopups={readonly
? []
: [{
hotkey: ['mod', '/'],
Popup: ({ onClose, onInsert }) => (
<AddInputField
nodeId={nodeId}
onSave={handleInsertHITLNode(onInsert!)}
onCancel={onClose}
/>
),
}]}
/>
<div
className={cn(
'flex grow flex-col rounded-[10px] border border-components-input-bg-normal bg-components-input-bg-normal pt-1',
isFocus && 'border-components-input-border-active bg-components-input-bg-active',
!isFocus && 'pb-[32px]',
readonly && 'pointer-events-none',
)}
>
<div className={cn('max-h-[300px] overflow-y-auto px-3', isExpand && 'h-0 max-h-full grow')}>
<PromptEditor
key={editorKey}
value={value}
onChange={onChange}
className={cn('min-h-[80px] ', isExpand && 'h-full')}
onFocus={setFocus}
onBlur={setBlur}
hitlInputBlock={{
show: true,
formInputs,
nodeId,
onFormInputsChange,
onFormInputItemRename,
onFormInputItemRemove,
variables: availableVars || [],
workflowNodesMap,
getVarType,
readonly,
}}
workflowVariableBlock={{
show: true,
variables: availableVars || [],
getVarType: getVarType as any,
workflowNodesMap,
}}
editable={!readonly}
shortcutPopups={readonly
? []
: [{
hotkey: ['mod', '/'],
Popup: ({ onClose, onInsert }) => (
<AddInputField
nodeId={nodeId}
onSave={handleInsertHITLNode(onInsert!)}
onCancel={onClose}
/>
),
}]}
/>
</div>
{isFocus && (
<div className="system-xs-regular flex h-8 shrink-0 items-center px-3 text-components-input-text-placeholder">
<Trans

9
web/app/components/workflow/nodes/human-input/panel.tsx
View File

@ -66,7 +66,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
const [isExpandFormContent, {
toggle: toggleExpandFormContent,
}] = useBoolean(false)
const panelWidth = useStore(state => state.panelWidth)
const nodePanelWidth = useStore(state => state.nodePanelWidth)
const [isPreview, {
toggle: togglePreview,
@ -89,7 +89,12 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
<Divider className="!my-0 !h-px !bg-divider-subtle" />
</div>
{/* form content */}
<div className={cn('px-4 py-2', isExpandFormContent && 'fixed bottom-[8px] right-[4px] top-[189px] z-10 flex flex-col bg-components-panel-bg')} style={{ width: isExpandFormContent ? panelWidth : '100%' }}>
<div
className={cn('px-4 py-2', isExpandFormContent && 'fixed bottom-[8px] right-[4px] top-[244px] z-10 flex flex-col rounded-b-2xl bg-components-panel-bg')}
style={{
width: isExpandFormContent ? nodePanelWidth : '100%',
}}
>
<div className="mb-1 flex shrink-0 items-center justify-between">
<div className="flex h-6 items-center gap-0.5">
<div className="system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.formContent.title`, { ns: 'workflow' })}</div>