Austin/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2024-11-16 11:42:29 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

chore: some components upgrage to new ui (#6468)

Browse Source
This commit is contained in:
Joel 2024-07-19 16:39:49 +08:00 committed by GitHub
parent 57729823a0
commit 3da854fe40
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 52 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/base/switch/index.tsx
View File

@ -47,8 +47,8 @@ const Switch = ({ onChange, size = 'lg', defaultValue = false, disabled = false,
}} }}
className={classNames( className={classNames(
wrapStyle[size], wrapStyle[size],
enabled ? 'bg-blue-600' : 'bg-gray-200', enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
'relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out', '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' : '', disabled ? '!opacity-50 !cursor-not-allowed' : '',
className, className,
)} )}
@ -58,7 +58,7 @@ const Switch = ({ onChange, size = 'lg', defaultValue = false, disabled = false,
className={classNames( className={classNames(
circleStyle[size], circleStyle[size],
enabled ? translateLeft[size] : 'translate-x-0', 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> </OriginalSwitch>

6
web/app/components/workflow/nodes/_base/components/field.tsx
View File

@ -38,13 +38,13 @@ const Filed: FC<Props> = ({
onClick={() => supportFold && toggleFold()} onClick={() => supportFold && toggleFold()}
className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}> className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}>
<div className='flex items-center h-6'> <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 && ( {tooltip && (
<TooltipPlus popupContent={ <TooltipPlus popupContent={
<div className='w-[120px]'> <div className='w-[120px]'>
{tooltip} {tooltip}
</div>}> </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> </TooltipPlus>
)} )}
@ -52,7 +52,7 @@ const Filed: FC<Props> = ({
<div className='flex'> <div className='flex'>
{operations && <div>{operations}</div>} {operations && <div>{operations}</div>}
{supportFold && ( {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>
</div> </div>

12
web/app/components/workflow/nodes/_base/components/next-step/add.tsx
View File

@ -51,23 +51,23 @@ const Add = ({
return ( return (
<div <div
className={` className={`
relative flex items-center px-2 h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50 relative flex items-center px-2 h-9 rounded-lg border border-dashed border-divider-regular bg-dropzone-bg
hover:bg-gray-100 text-xs text-gray-500 cursor-pointer hover:bg-dropzone-bg-hover text-xs text-text-placeholder cursor-pointer
${open && '!bg-gray-100'} ${open && '!bg-components-dropzone-bg-alt'}
${nodesReadOnly && '!cursor-not-allowed'} ${nodesReadOnly && '!cursor-not-allowed'}
`} `}
> >
{ {
branchName && ( branchName && (
<div <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()} 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>
) )
} }
<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' /> <RiAddLine className='w-3 h-3' />
</div> </div>
{t('workflow.panel.selectNextStep')} {t('workflow.panel.selectNextStep')}

2
web/app/components/workflow/nodes/_base/components/next-step/index.tsx
View File

@ -33,7 +33,7 @@ const NextStep = ({
return ( return (
<div className='flex py-1'> <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 <BlockIcon
type={selectedNode!.data.type} type={selectedNode!.data.type}
toolIcon={toolIcon} toolIcon={toolIcon}

4
web/app/components/workflow/nodes/_base/components/next-step/item.tsx
View File

@ -58,7 +58,7 @@ const Item = ({
return ( return (
<div <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 && ( branchName && (
@ -75,7 +75,7 @@ const Item = ({
toolIcon={toolIcon} toolIcon={toolIcon}
className='shrink-0 mr-1.5' 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 && ( !nodesReadOnly && (
<BlockSelector <BlockSelector

18
web/app/components/workflow/nodes/_base/components/next-step/line.tsx
View File

@ -16,18 +16,18 @@ const Line = ({
{ {
index === 0 && ( index === 0 && (
<> <>
<path
d='M0,18 L24,18'
strokeWidth={1}
fill='none'
className='stroke-divider-soild'
/>
<rect <rect
x={0} x={0}
y={16} y={16}
width={1} width={1}
height={4} height={4}
fill='#98A2B3' className='fill-divider-soild-alt'
/>
<path
d='M0,18 L24,18'
strokeWidth={1}
stroke='#D0D5DD'
fill='none'
/> />
</> </>
) )
@ -37,8 +37,8 @@ const Line = ({
<path <path
d={`M0,18 Q12,18 12,28 L12,${index * 48 + 18 - 10} Q12,${index * 48 + 18} 24,${index * 48 + 18}`} d={`M0,18 Q12,18 12,28 L12,${index * 48 + 18 - 10} Q12,${index * 48 + 18} 24,${index * 48 + 18}`}
strokeWidth={1} strokeWidth={1}
stroke='#D0D5DD'
fill='none' fill='none'
className='stroke-divider-soild'
/> />
) )
} }
@ -47,7 +47,7 @@ const Line = ({
y={index * 48 + 18 - 2} y={index * 48 + 18 - 2}
width={1} width={1}
height={4} height={4}
fill='#98A2B3' className='fill-divider-soild-alt'
/> />
</g> </g>
)) ))

14
web/app/components/workflow/nodes/_base/components/output-vars.tsx
View File

@ -3,8 +3,10 @@ import type { FC } from 'react'
import React from 'react' import React from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks' import { useBoolean } from 'ahooks'
import {
RiArrowDownSLine,
} from '@remixicon/react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
type Props = { type Props = {
className?: string className?: string
@ -25,9 +27,9 @@ const OutputVars: FC<Props> = ({
<div> <div>
<div <div
onClick={toggleFold} 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> <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> </div>
{!isFold && ( {!isFold && (
<div className='mt-2 space-y-1'> <div className='mt-2 space-y-1'>
@ -57,10 +59,10 @@ export const VarItem: FC<VarItemProps> = ({
return ( return (
<div className='py-1'> <div className='py-1'>
<div className='flex leading-[18px] items-center'> <div className='flex leading-[18px] items-center'>
<div className='text-[13px] font-medium text-gray-900 font-mono'>{name}</div> <div className='code-sm-semibold text-text-secondary'>{name}</div>
<div className='ml-2 text-xs font-normal text-gray-500 capitalize'>{type}</div> <div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div>
</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} {description}
{subItems && ( {subItems && (
<div className='ml-2 border-l border-gray-200 pl-2'> <div className='ml-2 border-l border-gray-200 pl-2'>

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

@ -79,7 +79,7 @@ const BaseNode: FC<BaseNodeProps> = ({
<div <div
className={cn( className={cn(
'flex border-[2px] rounded-2xl', 'flex border-[2px] rounded-2xl',
showSelectedBorder ? 'border-primary-600' : 'border-transparent', showSelectedBorder ? 'border-components-option-card-option-selected-border' : 'border-transparent',
)} )}
ref={nodeRef} ref={nodeRef}
style={{ style={{
@ -91,8 +91,8 @@ const BaseNode: FC<BaseNodeProps> = ({
className={cn( className={cn(
'group relative pb-1 shadow-xs', 'group relative pb-1 shadow-xs',
'border border-transparent rounded-[15px]', 'border border-transparent rounded-[15px]',
data.type !== BlockEnum.Iteration && 'w-[240px] bg-[#fcfdff]', data.type !== BlockEnum.Iteration && 'w-[240px] bg-workflow-block-bg',
data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-[#fcfdff]/80', data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-workflow-block-bg/80',
!data._runningStatus && 'hover:shadow-lg', !data._runningStatus && 'hover:shadow-lg',
showRunningBorder && '!border-primary-500', showRunningBorder && '!border-primary-500',
showSuccessBorder && '!border-[#12B76A]', showSuccessBorder && '!border-[#12B76A]',
@ -156,7 +156,7 @@ const BaseNode: FC<BaseNodeProps> = ({
/> />
<div <div
title={data.title} 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} {data.title}
</div> </div>
@ -197,7 +197,7 @@ const BaseNode: FC<BaseNodeProps> = ({
} }
{ {
data.desc && data.type !== BlockEnum.Iteration && ( 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} {data.desc}
</div> </div>
) )

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

@ -98,21 +98,21 @@ const BasePanel: FC<BasePanelProps> = ({
return ( return (
<div className={cn( <div className={cn(
'relative mr-2 h-full', '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 <div
ref={triggerRef} ref={triggerRef}
className='absolute top-1/2 -translate-y-1/2 -left-2 w-3 h-6 cursor-col-resize resize-x'> 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>
<div <div
ref={containerRef} 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={{ style={{
width: `${panelWidth}px`, 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'> <div className='flex items-center px-4 pt-4 pb-1'>
<BlockIcon <BlockIcon
className='shrink-0 mr-1' className='shrink-0 mr-1'
@ -137,19 +137,19 @@ const BasePanel: FC<BasePanelProps> = ({
handleSyncWorkflowDraft(true) handleSyncWorkflowDraft(true)
}} }}
> >
<RiPlayLargeLine className='w-4 h-4 text-gray-500' /> <RiPlayLargeLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
</TooltipPlus> </TooltipPlus>
) )
} }
<HelpLink nodeType={data.type} /> <HelpLink nodeType={data.type} />
<PanelOperator id={id} data={data} showHelpLink={false} /> <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 <div
className='flex items-center justify-center w-6 h-6 cursor-pointer' className='flex items-center justify-center w-6 h-6 cursor-pointer'
onClick={() => handleNodeSelect(id, true)} onClick={() => handleNodeSelect(id, true)}
> >
<RiCloseLine className='w-4 h-4' /> <RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
</div> </div>
</div> </div>
@ -166,10 +166,10 @@ const BasePanel: FC<BasePanelProps> = ({
{ {
!!availableNextBlocks.length && ( !!availableNextBlocks.length && (
<div className='p-4 border-t-[0.5px] border-t-black/5'> <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()} {t('workflow.panel.nextStep').toLocaleUpperCase()}
</div> </div>
<div className='mb-2 text-xs text-gray-400'> <div className='mb-2 system-xs-regular text-text-tertiary'>
{t('workflow.panel.addNextStep')} {t('workflow.panel.addNextStep')}
</div> </div>
<NextStep selectedNode={{ id, data } as Node} /> <NextStep selectedNode={{ id, data } as Node} />

6
web/app/styles/globals.css
View File

@ -276,6 +276,10 @@ button:focus-within {
line-height: 24px; line-height: 24px;
} }
[class*='code-'] {
@apply font-mono;
}
.code-xs-regular { .code-xs-regular {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
@ -563,6 +567,7 @@ button:focus-within {
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
} }
/* font define end */ /* font define end */
/* border radius start */ /* border radius start */
@ -625,6 +630,7 @@ button:focus-within {
.radius-full { .radius-full {
border-radius: 64px; border-radius: 64px;
} }
/* border radius end */ /* border radius end */
.link { .link {