mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-04-18 11:49:41 +08:00
http node dark mode
This commit is contained in:
parent
b02d5728b7
commit
769a4fb5e5
@ -112,7 +112,7 @@ const Editor: FC<Props> = ({
|
||||
<Tooltip
|
||||
popupContent={`${t('workflow.common.insertVarTip')}`}
|
||||
>
|
||||
<div className='cursor-pointer rounded-[5px] border-[0.5px] border-black/5 bg-white p-0.5 shadow-lg hover:bg-gray-100'>
|
||||
<div className='cursor-pointer rounded-[5px] border-[0.5px] border-divider-regular bg-components-badge-white-to-dark p-0.5 shadow-lg'>
|
||||
<Variable02 className='h-3.5 w-3.5 text-components-button-secondary-accent-text' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
@ -53,9 +53,9 @@ const ApiInput: FC<Props> = ({
|
||||
onChange={onMethodChange}
|
||||
options={MethodOptions}
|
||||
trigger={
|
||||
<div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border-black/5 bg-gray-100 px-2.5')} >
|
||||
<div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-gray-900'>{method}</div>
|
||||
{!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-gray-700' />}
|
||||
<div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-2.5')} >
|
||||
<div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-text-primary'>{method}</div>
|
||||
{!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-text-secondary' />}
|
||||
</div>
|
||||
}
|
||||
popupClassName='top-[34px] w-[108px]'
|
||||
@ -65,7 +65,7 @@ const ApiInput: FC<Props> = ({
|
||||
|
||||
<Input
|
||||
instanceId='http-api-url'
|
||||
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
||||
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
||||
value={url}
|
||||
onChange={onUrlChange}
|
||||
readOnly={readonly}
|
||||
|
@ -28,9 +28,9 @@ type Props = {
|
||||
const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: React.JSX.Element }) => {
|
||||
return (
|
||||
<div>
|
||||
<div className='text-[13px] font-medium leading-8 text-gray-700'>
|
||||
<div className='text-[13px] font-medium leading-8 text-text-secondary'>
|
||||
{title}
|
||||
{isRequired && <span className='ml-0.5 text-[#D92D20]'>*</span>}
|
||||
{isRequired && <span className='ml-0.5 text-text-destructive'>*</span>}
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
@ -158,7 +158,7 @@ const Authorization: FC<Props> = ({
|
||||
<div className='flex'>
|
||||
<Input
|
||||
instanceId='http-api-key'
|
||||
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
||||
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
||||
value={tempPayload.config?.api_key || ''}
|
||||
onChange={handleAPIKeyChange}
|
||||
nodesOutputVars={availableVars}
|
||||
|
@ -21,9 +21,10 @@ const Item: FC<ItemProps> = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
isSelected ? 'border-[2px] border-primary-400 bg-white shadow-xs' : 'border border-gray-100 bg-gray-25',
|
||||
'flex h-8 w-0 grow cursor-pointer items-center justify-center rounded-lg text-[13px] font-normal text-gray-900')
|
||||
}
|
||||
'system-sm-regular flex h-8 grow cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
|
||||
!isSelected && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
isSelected && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{title}
|
||||
|
@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
|
||||
import { BodyType, type HttpNodeType, Method } from '../types'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { useNodesInteractions } from '@/app/components/workflow/hooks'
|
||||
|
||||
@ -141,9 +142,9 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
|
||||
className='!w-[400px] !max-w-[400px] !p-4'
|
||||
>
|
||||
<div>
|
||||
<textarea
|
||||
<Textarea
|
||||
value={inputString}
|
||||
className='my-3 h-40 w-full grow rounded-lg border-0 bg-gray-100 p-3 text-sm text-gray-900 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
|
||||
className='my-3 h-40 w-full grow'
|
||||
onChange={e => setInputString(e.target.value)}
|
||||
placeholder={t('workflow.nodes.http.curl.placeholder')!}
|
||||
/>
|
||||
|
@ -144,7 +144,7 @@ const EditBody: FC<Props> = ({
|
||||
onChange={handleTypeChange}
|
||||
disabled={readonly}
|
||||
/>
|
||||
<div className='text-[13px] font-normal leading-[18px] text-gray-700'>{bodyTextMap[t]}</div>
|
||||
<div className='text-[13px] font-normal leading-[18px] text-text-secondary'>{bodyTextMap[t]}</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
@ -57,12 +57,12 @@ const InputItem: FC<Props> = ({
|
||||
}, [onRemove])
|
||||
|
||||
return (
|
||||
<div className={cn(className, 'hover:cursor-text hover:bg-gray-50', 'relative flex h-full')}>
|
||||
<div className={cn(className, 'hover:cursor-text hover:bg-state-base-hover', 'relative flex h-full')}>
|
||||
{(!readOnly)
|
||||
? (
|
||||
<Input
|
||||
instanceId={instanceId}
|
||||
className={cn(isFocus ? 'bg-gray-100' : 'bg-width', 'w-0 grow px-3 py-1')}
|
||||
className={cn(isFocus ? 'bg-components-input-bg-active' : 'bg-width', 'w-0 grow px-3 py-1')}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
readOnly={readOnly}
|
||||
@ -78,11 +78,11 @@ const InputItem: FC<Props> = ({
|
||||
: <div
|
||||
className="h-[18px] w-full pl-0.5 leading-[18px]"
|
||||
>
|
||||
{!hasValue && <div className='text-xs font-normal text-gray-300'>{placeholder}</div>}
|
||||
{!hasValue && <div className='text-xs font-normal text-text-quaternary'>{placeholder}</div>}
|
||||
{hasValue && (
|
||||
<Input
|
||||
instanceId={instanceId}
|
||||
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
||||
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
readOnly={readOnly}
|
||||
|
@ -62,7 +62,7 @@ const KeyValueItem: FC<Props> = ({
|
||||
|
||||
return (
|
||||
// group class name is for hover row show remove button
|
||||
<div className={cn(className, 'h-min-7 group flex border-t border-gray-200')}>
|
||||
<div className={cn(className, 'h-min-7 group flex border-t border-divider-regular')}>
|
||||
<div className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>
|
||||
{!keyNotSupportVar
|
||||
? (
|
||||
@ -79,7 +79,7 @@ const KeyValueItem: FC<Props> = ({
|
||||
)
|
||||
: (
|
||||
<input
|
||||
className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-white outline-none hover:bg-gray-50 focus:ring-0'
|
||||
className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-transparent outline-none hover:bg-components-input-bg-hover focus:ring-0'
|
||||
value={payload.key}
|
||||
onChange={e => handleChange('key')(e.target.value)}
|
||||
/>
|
||||
@ -95,7 +95,7 @@ const KeyValueItem: FC<Props> = ({
|
||||
{ name: 'file', value: 'file' },
|
||||
]}
|
||||
readonly={readonly}
|
||||
triggerClassName='rounded-none h-7'
|
||||
triggerClassName='rounded-none h-7 text-text-primary'
|
||||
triggerClassNameFn={isOpen => isOpen ? 'bg-state-base-hover' : 'bg-transparent'}
|
||||
popupClassName='w-[80px] h-7'
|
||||
/>
|
||||
|
@ -28,8 +28,8 @@ const InputField: FC<{
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex h-[18px] items-center space-x-2">
|
||||
<span className="text-[13px] font-medium text-gray-900">{title}</span>
|
||||
<span className="text-xs font-normal text-gray-500">{description}</span>
|
||||
<span className="text-[13px] font-medium text-text-primary">{title}</span>
|
||||
<span className="text-xs font-normal text-text-tertiary">{description}</span>
|
||||
</div>
|
||||
<Input
|
||||
type='number'
|
||||
|
@ -13,10 +13,11 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
|
||||
|
||||
return (
|
||||
<div className='mb-1 px-3 py-1'>
|
||||
<div className='flex items-start rounded-md bg-gray-100 p-1'>
|
||||
<div className='flex h-4 shrink-0 items-center rounded bg-gray-25 px-1 text-xs font-semibold uppercase text-gray-700'>{method}</div>
|
||||
<div className='flex items-start rounded-md bg-workflow-block-parma-bg p-1'>
|
||||
<div className='flex h-4 shrink-0 items-center rounded bg-components-badge-white-to-dark px-1 text-xs font-semibold uppercase text-text-secondary'>{method}</div>
|
||||
<div className='pl-1 pt-1'>
|
||||
<ReadonlyInputWithSelectVar
|
||||
className='text-text-secondary'
|
||||
value={url}
|
||||
nodeId={id}
|
||||
/>
|
||||
|
@ -73,20 +73,20 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
|
||||
<div className='flex'>
|
||||
<div
|
||||
onClick={showAuthorization}
|
||||
className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
|
||||
className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
|
||||
>
|
||||
{!readOnly && <Settings01 className='h-3 w-3 text-gray-500' />}
|
||||
<div className='text-xs font-medium text-gray-500'>
|
||||
{!readOnly && <Settings01 className='h-3 w-3 text-text-tertiary' />}
|
||||
<div className='text-xs font-medium text-text-tertiary'>
|
||||
{t(`${i18nPrefix}.authorization.authorization`)}
|
||||
<span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
|
||||
<span className='ml-1 text-text-secondary'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={showCurlPanel}
|
||||
className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
|
||||
className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
|
||||
>
|
||||
{!readOnly && <FileArrow01 className='h-3 w-3 text-gray-500' />}
|
||||
<div className='text-xs font-medium text-gray-500'>
|
||||
{!readOnly && <FileArrow01 className='h-3 w-3 text-text-tertiary' />}
|
||||
<div className='text-xs font-medium text-text-tertiary'>
|
||||
{t(`${i18nPrefix}.curl.title`)}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -35,7 +35,7 @@ const ExtractInput: FC<Props> = ({
|
||||
<div className='flex items-start space-x-1'>
|
||||
<Input
|
||||
instanceId='http-extract-number'
|
||||
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
||||
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
readOnly={readOnly}
|
||||
|
Loading…
x
Reference in New Issue
Block a user