chore: pre popular placeholder ui

This commit is contained in:
Joel 2025-08-25 17:47:45 +08:00
parent fda19d3f0e
commit 305b5da764
3 changed files with 19 additions and 9 deletions

View File

@ -81,25 +81,33 @@ const PrePopulate: FC<Props> = ({
if (isVariable) {
return (
<div>
<div className='relative h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2'>
<VarReferencePicker
{...varPickerProps}
isJustShowValue
/>
<TypeSwitch
className='absolute bottom-1 left-1.5'
isVariable={isVariable}
onIsVariableChange={handleTypeChange}
/>
<TypeSwitch isVariable={isVariable} onIsVariableChange={handleTypeChange} />
</div>
)
}
return (
<div className={cn('relative rounded-md border border-transparent bg-components-input-bg-normal pb-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs')}>
<div className={cn('relative min-h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal pb-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs')}>
<Textarea
value={value || ''}
className='rounded-b-none border-none bg-transparent px-3 pb-8 hover:bg-transparent focus:bg-transparent focus:shadow-none'
className='h-[43px] min-h-[43px] rounded-none border-none bg-transparent px-3 hover:bg-transparent focus:bg-transparent focus:shadow-none'
onChange={e => onValueChange?.(e.target.value)}
onFocus={() => setIsFocus(true)}
onFocus={() => {
setOnPlaceholderClicked(true)
setIsFocus(true)
}}
onBlur={() => setIsFocus(false)}
/>
<TypeSwitch
className='ml-1.5'
className='absolute bottom-1 left-1.5'
isVariable={isVariable}
onIsVariableChange={handleTypeChange}
/>

View File

@ -18,7 +18,7 @@ const TypeSwitch: FC<Props> = ({
}) => {
const { t } = useTranslation()
return (
<div className={cn('inline-flex h-6 cursor-pointer items-center space-x-1 rounded-md pl-1.5 pr-2 text-text-tertiary hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
<div className={cn('inline-flex h-6 cursor-pointer select-none items-center space-x-1 rounded-md pl-1.5 pr-2 text-text-tertiary hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
<Variable02 className='size-3.5' />
<div className='system-xs-medium'>{t(`workflow.nodes.humanInput.insertInputField.${isVariable ? 'useConstantInstead' : 'useVarInstead'}`)}</div>
</div>

View File

@ -62,6 +62,7 @@ type Props = {
availableNodes?: Node[]
availableVars?: NodeOutPutVar[]
trigger?: React.ReactNode
isJustShowValue?: boolean
isAddBtnTrigger?: boolean
schema?: Partial<CredentialFormSchema>
valueTypePlaceHolder?: string
@ -94,6 +95,7 @@ const VarReferencePicker: FC<Props> = ({
availableNodes: passedInAvailableNodes,
availableVars: passedInAvailableVars,
trigger,
isJustShowValue,
isAddBtnTrigger,
schema,
valueTypePlaceHolder,
@ -408,7 +410,7 @@ const VarReferencePicker: FC<Props> = ({
<AddButton onClick={noop}></AddButton>
</div>
)
: (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled')}>
: (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled', isJustShowValue && 'h-6 bg-transparent p-0')}>
{isSupportConstantValue
? <div onClick={(e) => {
e.stopPropagation()
@ -516,7 +518,7 @@ const VarReferencePicker: FC<Props> = ({
</VarPickerWrap>
)}
{(hasValue && !readonly && !isInTable) && (<div
{(hasValue && !readonly && !isInTable && !isJustShowValue) && (<div
className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-state-base-hover group-hover/wrap:visible'
onClick={handleClearVar}
>