kanshan/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-02-18 00:44:46 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

method selector

Browse Source
This commit is contained in:
JzoNg 2025-08-01 15:36:02 +08:00
parent 3371989572
commit a6d2392c6c
3 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
View File

@ -2,10 +2,15 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import Tooltip from '@/app/components/base/tooltip'
import MethodSelector from './method-selector'
import type { DeliveryMethod } from '../../types'
const i18nPrefix = 'workflow.nodes.humanInput'
const DeliveryMethod: React.FC = () => {
type Props = {
value: DeliveryMethod[]
}
const DeliveryMethodForm: React.FC<Props> = ({ value }) => {
const { t } = useTranslation()
return (
@ -19,7 +24,7 @@ const DeliveryMethod: React.FC = () => {
</div>
<div className='flex items-center px-1'>
<MethodSelector
onEdit={() => { /* Add edit action logic here */ }}
data={value}
/>
</div>
</div>
@ -28,4 +33,4 @@ const DeliveryMethod: React.FC = () => {
)
}
export default DeliveryMethod
export default DeliveryMethodForm

24
web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
View File

@ -13,16 +13,18 @@ import {
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import type { DeliveryMethod } from '../../types'
import { DeliveryMethodType } from '../../types'
import cn from '@/utils/classnames'
const i18nPrefix = 'workflow.nodes.humanInput'
type Props = {
onEdit: () => void
data: DeliveryMethod[]
}
const MethodSelector: FC<Props> = ({
onEdit,
data,
}) => {
const { t } = useTranslation()
const [open, doSetOpen] = useState(false)
@ -56,23 +58,29 @@ const MethodSelector: FC<Props> = ({
<PortalToFollowElemContent className='z-50'>
<div className='w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
<div className='p-1'>
<div className='relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover'>
<div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5'>
<div className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', data.some(method => method.type === DeliveryMethodType.WebApp) && 'cursor-not-allowed bg-transparent hover:bg-transparent')}>
<div className={cn('rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5', data.some(method => method.type === DeliveryMethodType.WebApp) && 'opacity-50')}>
<RiRobot2Fill className='h-3.5 w-3.5 text-text-primary-on-surface' />
</div>
<div className='p-1'>
<div className={cn('p-1', data.some(method => method.type === DeliveryMethodType.WebApp) && 'opacity-50')}>
<div className='system-sm-medium mb-0.5 truncate text-text-primary'>{t(`${i18nPrefix}.deliveryMethod.types.webapp.title`)}</div>
<div className='system-xs-regular truncate text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.types.webapp.description`)}</div>
</div>
{data.some(method => method.type === DeliveryMethodType.WebApp) && (
<div className='system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.added`)}</div>
)}
</div>
<div className='relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover'>
<div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5'>
<div className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', data.some(method => method.type === DeliveryMethodType.Email) && 'cursor-not-allowed bg-transparent hover:bg-transparent')}>
<div className={cn('rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5', data.some(method => method.type === DeliveryMethodType.Email) && 'opacity-50')}>
<RiMailSendFill className='h-3.5 w-3.5 text-text-primary-on-surface' />
</div>
<div className='p-1'>
<div className={cn('p-1', data.some(method => method.type === DeliveryMethodType.Email) && 'opacity-50')}>
<div className='system-sm-medium mb-0.5 truncate text-text-primary'>{t(`${i18nPrefix}.deliveryMethod.types.email.title`)}</div>
<div className='system-xs-regular truncate text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.types.email.description`)}</div>
</div>
{data.some(method => method.type === DeliveryMethodType.Email) && (
<div className='system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.added`)}</div>
)}
</div>
</div>
</div>

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

@ -33,7 +33,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
return (
<div className='py-2'>
{/* delivery methods */}
<DeliveryMethod />
<DeliveryMethod value={inputs.deliveryMethod || []} />
<div className='px-4 py-2'>
<Divider className='!my-0 !h-px !bg-divider-subtle' />
</div>