mirror of https://github.com/langgenius/dify.git
node style
This commit is contained in:
StyleZhang
parent
fb2e351c08
commit
524b19bb3a
|
|
@ -285,7 +285,7 @@ export const useWorkflowRun = () => {
|
|||
...restCallback,
|
||||
},
|
||||
)
|
||||
}, [store, reactflow, workflowStore])
|
||||
}, [store, reactflow, workflowStore, handleLoadBackupDraft])
|
||||
|
||||
const handleStopRun = useCallback((taskId: string) => {
|
||||
const appId = useAppStore.getState().appDetail?.id
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const BaseNode: FC<BaseNodeProps> = ({
|
|||
>
|
||||
<div
|
||||
className={`
|
||||
group relative w-[240px] bg-[#fcfdff] shadow-xs
|
||||
group relative pb-1 w-[240px] bg-[#fcfdff] shadow-xs
|
||||
border border-transparent rounded-[15px]
|
||||
${!data._runningStatus && 'hover:shadow-lg'}
|
||||
${data._runningStatus === NodeRunningStatus.Running && '!border-primary-500'}
|
||||
|
|
@ -118,9 +118,7 @@ const BaseNode: FC<BaseNodeProps> = ({
|
|||
)
|
||||
}
|
||||
</div>
|
||||
<div className='pb-1'>
|
||||
{cloneElement(children, { id, data })}
|
||||
</div>
|
||||
{cloneElement(children, { id, data })}
|
||||
{
|
||||
data.desc && (
|
||||
<div className='px-3 pt-1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
|
||||
|
|
|
|||
|
|
@ -46,9 +46,14 @@ const Node: FC<NodeProps<EndNodeType>> = ({
|
|||
return type
|
||||
}
|
||||
const { outputs } = data
|
||||
const filteredOutputs = (outputs as Variable[]).filter(({ value_selector }) => value_selector.length > 0)
|
||||
|
||||
if (!filteredOutputs.length)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='px-3 space-y-0.5'>
|
||||
{(outputs as Variable[]).filter(({ value_selector }) => value_selector.length > 0).map(({ value_selector }, index) => {
|
||||
<div className='mb-1 px-3 py-1 space-y-0.5'>
|
||||
{filteredOutputs.map(({ value_selector }, index) => {
|
||||
const node = getNode(value_selector[0])
|
||||
const varName = value_selector[value_selector.length - 1]
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
|
|||
}) => {
|
||||
const { method, url } = data
|
||||
return (
|
||||
<div className='px-3'>
|
||||
<div className='mb-1 px-3 py-1'>
|
||||
<div className='flex items-center p-1 rounded-md bg-gray-100'>
|
||||
<div className='shrink-0 px-1 h-7 leading-7 rounded bg-gray-25 text-xs font-semibold text-gray-700 uppercase'>{method}</div>
|
||||
<div className='ml-1 w-0 grow truncate text-xs font-normal text-gray-700'>{url}</div>
|
||||
|
|
|
|||
|
|
@ -21,8 +21,12 @@ const Node: FC<NodeProps<KnowledgeRetrievalNodeType>> = ({
|
|||
}
|
||||
})()
|
||||
}, [data.dataset_ids])
|
||||
|
||||
if (!selectedDatasets.length)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='px-3'>
|
||||
<div className='mb-1 px-3 py-1'>
|
||||
<div className='space-y-0.5'>
|
||||
{selectedDatasets.map(({ id, name }) => (
|
||||
<div key={id} className='flex items-center h-[26px] bg-gray-100 rounded-md px-1 text-xs font-normal text-gray-700'>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,12 @@ const Node: FC<NodeProps<LLMNodeType>> = ({
|
|||
textGenerationModelList,
|
||||
} = useTextGenerationCurrentProviderAndModelAndModelList()
|
||||
const hasSetModel = provider && modelId
|
||||
|
||||
if (!hasSetModel)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='px-3'>
|
||||
<div className='mb-1 px-3 py-1'>
|
||||
{hasSetModel && (
|
||||
<ModelSelector
|
||||
defaultModel={{ provider, model: modelId }}
|
||||
|
|
|
|||
|
|
@ -24,8 +24,11 @@ const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
|
|||
} = useTextGenerationCurrentProviderAndModelAndModelList()
|
||||
const hasSetModel = provider && modelId
|
||||
|
||||
if (!hasSetModel && !topics.length)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='px-3'>
|
||||
<div className='mb-1 px-3 py-1'>
|
||||
{hasSetModel && (
|
||||
<ModelSelector
|
||||
defaultModel={{ provider, model: modelId }}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,11 @@ const Node: FC<NodeProps<StartNodeType>> = ({
|
|||
const { t } = useTranslation()
|
||||
const { variables } = data
|
||||
|
||||
if (!variables.length)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='px-3'>
|
||||
<div className='mb-1 px-3 py-1'>
|
||||
<div className='space-y-0.5'>
|
||||
{variables.map(variable => (
|
||||
<div key={variable.variable} className='flex items-center h-6 justify-between bg-gray-100 rounded-md px-1 space-x-1 text-xs font-normal text-gray-700'>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
|
|||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<Split />
|
||||
{isChatMode && <Split />}
|
||||
{isChatMode && (
|
||||
<div className='px-4 pt-4 pb-2'>
|
||||
<OutputVars title={t(`${i18nPrefix}.builtInVar`)!}>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,15 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
|
|||
data,
|
||||
}) => {
|
||||
const { tool_configurations } = data
|
||||
const toolConfigs = Object.keys(tool_configurations || {})
|
||||
|
||||
if (!toolConfigs.length)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='px-3'>
|
||||
<div className='mb-1 px-3 py-1'>
|
||||
<div className='space-y-0.5'>
|
||||
{Object.keys(tool_configurations || {}).map((key, index) => (
|
||||
{toolConfigs.map((key, index) => (
|
||||
<div key={index} className='flex items-center h-6 justify-between bg-gray-100 rounded-md px-1 space-x-1 text-xs font-normal text-gray-700'>
|
||||
<div className='text-xs font-medium text-gray-500 uppercase'>
|
||||
{key}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const Node: FC<NodeProps<VariableAssignerNodeType>> = (props) => {
|
|||
const variables = originVariables.filter(item => item.length > 0)
|
||||
|
||||
return (
|
||||
<div className='px-3'>
|
||||
<div className='mb-1 px-3 py-1'>
|
||||
<div className='mb-0.5 leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.title`)}</div>
|
||||
{
|
||||
variables.length === 0 && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue