mirror of
https://github.com/langgenius/dify.git
synced 2024-11-16 11:42:29 +08:00
chore: some components upgrage to new ui (#6468)
This commit is contained in:
Joel
GitHub
parent
57729823a0
commit
3da854fe40
|
|
@ -47,8 +47,8 @@ const Switch = ({ onChange, size = 'lg', defaultValue = false, disabled = false,
|
|||
}}
|
||||
className={classNames(
|
||||
wrapStyle[size],
|
||||
enabled ? 'bg-blue-600' : 'bg-gray-200',
|
||||
'relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
|
||||
enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
|
||||
'relative inline-flex flex-shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
|
||||
disabled ? '!opacity-50 !cursor-not-allowed' : '',
|
||||
className,
|
||||
)}
|
||||
|
|
@ -58,7 +58,7 @@ const Switch = ({ onChange, size = 'lg', defaultValue = false, disabled = false,
|
|||
className={classNames(
|
||||
circleStyle[size],
|
||||
enabled ? translateLeft[size] : 'translate-x-0',
|
||||
'pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||
'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
|
||||
)}
|
||||
/>
|
||||
</OriginalSwitch>
|
||||
|
|
|
|||
|
|
@ -38,13 +38,13 @@ const Filed: FC<Props> = ({
|
|||
onClick={() => supportFold && toggleFold()}
|
||||
className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}>
|
||||
<div className='flex items-center h-6'>
|
||||
<div className='text-[13px] font-medium text-gray-700 uppercase'>{title}</div>
|
||||
<div className='system-sm-semibold-uppercase text-text-secondary'>{title}</div>
|
||||
{tooltip && (
|
||||
<TooltipPlus popupContent={
|
||||
<div className='w-[120px]'>
|
||||
{tooltip}
|
||||
</div>}>
|
||||
<RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
|
||||
<RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-text-quaternary' />
|
||||
</TooltipPlus>
|
||||
)}
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ const Filed: FC<Props> = ({
|
|||
<div className='flex'>
|
||||
{operations && <div>{operations}</div>}
|
||||
{supportFold && (
|
||||
<RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500 cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
|
||||
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,23 +51,23 @@ const Add = ({
|
|||
return (
|
||||
<div
|
||||
className={`
|
||||
relative flex items-center px-2 h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50
|
||||
hover:bg-gray-100 text-xs text-gray-500 cursor-pointer
|
||||
${open && '!bg-gray-100'}
|
||||
relative flex items-center px-2 h-9 rounded-lg border border-dashed border-divider-regular bg-dropzone-bg
|
||||
hover:bg-dropzone-bg-hover text-xs text-text-placeholder cursor-pointer
|
||||
${open && '!bg-components-dropzone-bg-alt'}
|
||||
${nodesReadOnly && '!cursor-not-allowed'}
|
||||
`}
|
||||
>
|
||||
{
|
||||
branchName && (
|
||||
<div
|
||||
className='absolute left-1 right-1 -top-[7.5px] flex items-center h-3 text-[10px] text-gray-500 font-semibold'
|
||||
className='absolute left-1 right-1 -top-[7.5px] flex items-center h-3 text-[10px] text-text-placeholder font-semibold'
|
||||
title={branchName.toLocaleUpperCase()}
|
||||
>
|
||||
<div className='inline-block px-0.5 rounded-[5px] bg-white truncate'>{branchName.toLocaleUpperCase()}</div>
|
||||
<div className='inline-block px-0.5 rounded-[5px] bg-background-default truncate'>{branchName.toLocaleUpperCase()}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-gray-200'>
|
||||
<div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-background-default-dimm'>
|
||||
<RiAddLine className='w-3 h-3' />
|
||||
</div>
|
||||
{t('workflow.panel.selectNextStep')}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const NextStep = ({
|
|||
|
||||
return (
|
||||
<div className='flex py-1'>
|
||||
<div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
|
||||
<div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-background-default rounded-lg border-[0.5px] border-divider-regular shadow-xs'>
|
||||
<BlockIcon
|
||||
type={selectedNode!.data.type}
|
||||
toolIcon={toolIcon}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const Item = ({
|
|||
|
||||
return (
|
||||
<div
|
||||
className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
|
||||
className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-divider-regular bg-background-default hover:bg-background-default-hover shadow-xs text-xs text-text-secondary cursor-pointer'
|
||||
>
|
||||
{
|
||||
branchName && (
|
||||
|
|
@ -75,7 +75,7 @@ const Item = ({
|
|||
toolIcon={toolIcon}
|
||||
className='shrink-0 mr-1.5'
|
||||
/>
|
||||
<div className='grow'>{data.title}</div>
|
||||
<div className='grow system-xs-medium text-text-secondary'>{data.title}</div>
|
||||
{
|
||||
!nodesReadOnly && (
|
||||
<BlockSelector
|
||||
|
|
|
|||
|
|
@ -16,18 +16,18 @@ const Line = ({
|
|||
{
|
||||
index === 0 && (
|
||||
<>
|
||||
<path
|
||||
d='M0,18 L24,18'
|
||||
strokeWidth={1}
|
||||
fill='none'
|
||||
className='stroke-divider-soild'
|
||||
/>
|
||||
<rect
|
||||
x={0}
|
||||
y={16}
|
||||
width={1}
|
||||
height={4}
|
||||
fill='#98A2B3'
|
||||
/>
|
||||
<path
|
||||
d='M0,18 L24,18'
|
||||
strokeWidth={1}
|
||||
stroke='#D0D5DD'
|
||||
fill='none'
|
||||
className='fill-divider-soild-alt'
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
@ -37,8 +37,8 @@ const Line = ({
|
|||
<path
|
||||
d={`M0,18 Q12,18 12,28 L12,${index * 48 + 18 - 10} Q12,${index * 48 + 18} 24,${index * 48 + 18}`}
|
||||
strokeWidth={1}
|
||||
stroke='#D0D5DD'
|
||||
fill='none'
|
||||
className='stroke-divider-soild'
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@ const Line = ({
|
|||
y={index * 48 + 18 - 2}
|
||||
width={1}
|
||||
height={4}
|
||||
fill='#98A2B3'
|
||||
className='fill-divider-soild-alt'
|
||||
/>
|
||||
</g>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@ import type { FC } from 'react'
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import {
|
||||
RiArrowDownSLine,
|
||||
} from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
|
|
@ -25,9 +27,9 @@ const OutputVars: FC<Props> = ({
|
|||
<div>
|
||||
<div
|
||||
onClick={toggleFold}
|
||||
className={cn(className, 'flex justify-between leading-[18px] text-[13px] font-semibold text-gray-700 uppercase cursor-pointer')}>
|
||||
className={cn(className, 'flex justify-between system-sm-semibold-uppercase text-text-secondary cursor-pointer')}>
|
||||
<div>{title || t('workflow.nodes.common.outputVars')}</div>
|
||||
<ChevronRight className='w-4 h-4 text-gray-500 transform transition-transform' style={{ transform: isFold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
|
||||
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary transform transition-transform' style={{ transform: isFold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
|
||||
</div>
|
||||
{!isFold && (
|
||||
<div className='mt-2 space-y-1'>
|
||||
|
|
@ -57,10 +59,10 @@ export const VarItem: FC<VarItemProps> = ({
|
|||
return (
|
||||
<div className='py-1'>
|
||||
<div className='flex leading-[18px] items-center'>
|
||||
<div className='text-[13px] font-medium text-gray-900 font-mono'>{name}</div>
|
||||
<div className='ml-2 text-xs font-normal text-gray-500 capitalize'>{type}</div>
|
||||
<div className='code-sm-semibold text-text-secondary'>{name}</div>
|
||||
<div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div>
|
||||
</div>
|
||||
<div className='mt-0.5 leading-[18px] text-xs font-normal text-gray-600'>
|
||||
<div className='mt-0.5 system-xs-regular text-text-tertiary'>
|
||||
{description}
|
||||
{subItems && (
|
||||
<div className='ml-2 border-l border-gray-200 pl-2'>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ const BaseNode: FC<BaseNodeProps> = ({
|
|||
<div
|
||||
className={cn(
|
||||
'flex border-[2px] rounded-2xl',
|
||||
showSelectedBorder ? 'border-primary-600' : 'border-transparent',
|
||||
showSelectedBorder ? 'border-components-option-card-option-selected-border' : 'border-transparent',
|
||||
)}
|
||||
ref={nodeRef}
|
||||
style={{
|
||||
|
|
@ -91,8 +91,8 @@ const BaseNode: FC<BaseNodeProps> = ({
|
|||
className={cn(
|
||||
'group relative pb-1 shadow-xs',
|
||||
'border border-transparent rounded-[15px]',
|
||||
data.type !== BlockEnum.Iteration && 'w-[240px] bg-[#fcfdff]',
|
||||
data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-[#fcfdff]/80',
|
||||
data.type !== BlockEnum.Iteration && 'w-[240px] bg-workflow-block-bg',
|
||||
data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-workflow-block-bg/80',
|
||||
!data._runningStatus && 'hover:shadow-lg',
|
||||
showRunningBorder && '!border-primary-500',
|
||||
showSuccessBorder && '!border-[#12B76A]',
|
||||
|
|
@ -156,7 +156,7 @@ const BaseNode: FC<BaseNodeProps> = ({
|
|||
/>
|
||||
<div
|
||||
title={data.title}
|
||||
className='grow mr-1 text-[13px] font-semibold text-gray-700 truncate'
|
||||
className='grow mr-1 system-sm-semibold-uppercase text-text-primary truncate'
|
||||
>
|
||||
{data.title}
|
||||
</div>
|
||||
|
|
@ -197,7 +197,7 @@ const BaseNode: FC<BaseNodeProps> = ({
|
|||
}
|
||||
{
|
||||
data.desc && data.type !== BlockEnum.Iteration && (
|
||||
<div className='px-3 pt-1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
|
||||
<div className='px-3 pt-1 pb-2 system-xs-regular text-text-tertiary whitespace-pre-line break-words'>
|
||||
{data.desc}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -98,21 +98,21 @@ const BasePanel: FC<BasePanelProps> = ({
|
|||
return (
|
||||
<div className={cn(
|
||||
'relative mr-2 h-full',
|
||||
showMessageLogModal && '!absolute !mr-0 w-[384px] overflow-hidden -top-[5px] right-[416px] z-0 shadow-lg border-[0.5px] border-gray-200 rounded-2xl transition-all',
|
||||
showMessageLogModal && '!absolute !mr-0 w-[384px] overflow-hidden -top-[5px] right-[416px] z-0 shadow-lg border-[0.5px] border-components-panel-border rounded-2xl transition-all',
|
||||
)}>
|
||||
<div
|
||||
ref={triggerRef}
|
||||
className='absolute top-1/2 -translate-y-1/2 -left-2 w-3 h-6 cursor-col-resize resize-x'>
|
||||
<div className='w-1 h-6 bg-gray-300 rounded-sm'></div>
|
||||
<div className='w-1 h-6 bg-divider-regular rounded-sm'></div>
|
||||
</div>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cn('h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
|
||||
className={cn('h-full bg-components-panel-bg shadow-lg border-[0.5px] border-components-panel-border rounded-2xl', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
|
||||
style={{
|
||||
width: `${panelWidth}px`,
|
||||
}}
|
||||
>
|
||||
<div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
|
||||
<div className='sticky top-0 bg-components-panel-bg border-b-[0.5px] border-black/5 z-10'>
|
||||
<div className='flex items-center px-4 pt-4 pb-1'>
|
||||
<BlockIcon
|
||||
className='shrink-0 mr-1'
|
||||
|
|
@ -137,19 +137,19 @@ const BasePanel: FC<BasePanelProps> = ({
|
|||
handleSyncWorkflowDraft(true)
|
||||
}}
|
||||
>
|
||||
<RiPlayLargeLine className='w-4 h-4 text-gray-500' />
|
||||
<RiPlayLargeLine className='w-4 h-4 text-text-tertiary' />
|
||||
</div>
|
||||
</TooltipPlus>
|
||||
)
|
||||
}
|
||||
<HelpLink nodeType={data.type} />
|
||||
<PanelOperator id={id} data={data} showHelpLink={false} />
|
||||
<div className='mx-3 w-[1px] h-3.5 bg-gray-200' />
|
||||
<div className='mx-3 w-[1px] h-3.5 bg-divider-regular' />
|
||||
<div
|
||||
className='flex items-center justify-center w-6 h-6 cursor-pointer'
|
||||
onClick={() => handleNodeSelect(id, true)}
|
||||
>
|
||||
<RiCloseLine className='w-4 h-4' />
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -166,10 +166,10 @@ const BasePanel: FC<BasePanelProps> = ({
|
|||
{
|
||||
!!availableNextBlocks.length && (
|
||||
<div className='p-4 border-t-[0.5px] border-t-black/5'>
|
||||
<div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
|
||||
<div className='flex items-center mb-1 system-sm-semibold-uppercase text-text-secondary'>
|
||||
{t('workflow.panel.nextStep').toLocaleUpperCase()}
|
||||
</div>
|
||||
<div className='mb-2 text-xs text-gray-400'>
|
||||
<div className='mb-2 system-xs-regular text-text-tertiary'>
|
||||
{t('workflow.panel.addNextStep')}
|
||||
</div>
|
||||
<NextStep selectedNode={{ id, data } as Node} />
|
||||
|
|
|
|||
|
|
@ -276,6 +276,10 @@ button:focus-within {
|
|||
line-height: 24px;
|
||||
}
|
||||
|
||||
[class*='code-'] {
|
||||
@apply font-mono;
|
||||
}
|
||||
|
||||
.code-xs-regular {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
|
@ -563,6 +567,7 @@ button:focus-within {
|
|||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* font define end */
|
||||
|
||||
/* border radius start */
|
||||
|
|
@ -625,6 +630,7 @@ button:focus-within {
|
|||
.radius-full {
|
||||
border-radius: 64px;
|
||||
}
|
||||
|
||||
/* border radius end */
|
||||
|
||||
.link {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user