youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 18:08:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
StyleZhang
2024-02-06 17:05:26 +08:00
parent 20d5fdea2c
commit a17c0e5bf6
11 changed files with 273 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -3,6 +3,8 @@ import type {
ReactNode,
} from 'react'
import { memo } from 'react'
import { useNodeId } from 'reactflow'
import { useWorkflowContext } from '../../context'
import { Plus } from '@/app/components/base/icons/src/vender/line/general'
type BaseNodeProps = {
@ -12,12 +14,20 @@ type BaseNodeProps = {
const BaseNode: FC<BaseNodeProps> = ({
children,
}) => {
const nodeId = useNodeId()
const {
selectedNodeId,
handleSelectedNodeIdChange,
} = useWorkflowContext()
return (
<div
className={`
group relative pb-2 w-[296px] bg-[#fcfdff] border border-white rounded-2xl shadow-xs
group relative pb-2 w-[296px] bg-[#fcfdff] rounded-2xl shadow-xs
hover:shadow-lg
${selectedNodeId === nodeId ? 'border-[2px] border-primary-600' : 'border border-white'}
`}
onClick={() => handleSelectedNodeIdChange(nodeId || '')}
>
<div className='flex items-center px-3 pt-3 pb-2'>
<div className='mr-2'></div>

63
web/app/components/workflow/nodes/_base/panel.tsx
View File

@ -2,6 +2,14 @@ import type {
FC,
ReactNode,
} from 'react'
import { useState } from 'react'
import { useWorkflowContext } from '../../context'
import { XClose } from '@/app/components/base/icons/src/vender/line/general'
enum TabEnum {
Inputs = 'inputs',
Outputs = 'outputs',
}
type BasePanelProps = {
defaultElement?: ReactNode
@ -14,26 +22,63 @@ const BasePanel: FC<BasePanelProps> = ({
inputsElement,
ouputsElement,
}) => {
const initialActiveTab = inputsElement ? TabEnum.Inputs : ouputsElement ? TabEnum.Outputs : ''
const [activeTab, setActiveTab] = useState(initialActiveTab)
const { handleSelectedNodeIdChange } = useWorkflowContext()
return (
<div className='absolute top-2 right-2 bottom-2 w-[420px] shadow-lg border-[0.5px] border-gray-200 rounded-2xl'>
<div className='absolute top-2 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-20'>
<div className='flex items-center px-4 pt-3'>
<div className='mr-2 w-6 h-6'></div>
<div className='py-1 text-base text-gray-900 font-semibold '>LLM</div>
<div className='shrink-0 mr-2 w-6 h-6'></div>
<div className='grow py-1 text-base text-gray-900 font-semibold '>LLM</div>
<div className='shrink-0 flex items-center'>
<div
className='w-6 h-6 cursor-pointer'
onClick={() => handleSelectedNodeIdChange('')}
>
<XClose className='w-4 h-4 text-gray-500' />
</div>
</div>
</div>
<div className='p-2'>
<div className='py-[5px] pl-1.5 pr-2 text-xs text-gray-400'>
Add description...
</div>
</div>
<div className='flex items-center px-4 h-[42px]'>
inputs
</div>
{
(inputsElement || ouputsElement) && (
<div className='flex items-center px-4 h-[42px]'>
{
inputsElement && (
<div
className='cursor-pointer'
onClick={() => setActiveTab(TabEnum.Inputs)}
>
inputs
</div>
)
}
{
ouputsElement && (
<div
className='ml-4 cursor-pointer'
onClick={() => setActiveTab(TabEnum.Outputs)}
>
outpus
</div>
)
}
</div>
)
}
<div className='py-2 border-t-[0.5px] border-b-[0.5px] border-black/5'>
{defaultElement}
{inputsElement}
{ouputsElement}
{activeTab === TabEnum.Inputs && inputsElement}
{activeTab === TabEnum.Outputs && ouputsElement}
</div>
<div className='p-4'>
next step
</div>
<div className='p-4'></div>
</div>
)
}