mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-11 20:06:54 +08:00
Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
@@ -78,11 +78,11 @@ const AddBlock = ({
|
||||
title={t('workflow.common.addBlock')}
|
||||
>
|
||||
<div className={cn(
|
||||
'flex items-center justify-center w-8 h-8 rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
|
||||
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
|
||||
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
|
||||
open && 'bg-state-accent-active text-text-accent',
|
||||
)}>
|
||||
<RiAddCircleFill className='w-4 h-4' />
|
||||
<RiAddCircleFill className='h-4 w-4' />
|
||||
</div>
|
||||
</TipPopup>
|
||||
)
|
||||
|
||||
@@ -44,54 +44,54 @@ const Control = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg text-text-tertiary'>
|
||||
<div className='flex items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-text-tertiary shadow-lg'>
|
||||
<AddBlock />
|
||||
<TipPopup title={t('workflow.nodes.note.addNote')}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center ml-[1px] w-8 h-8 rounded-lg hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
|
||||
'ml-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
|
||||
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
|
||||
)}
|
||||
onClick={addNote}
|
||||
>
|
||||
<RiStickyNoteAddLine className='w-4 h-4' />
|
||||
<RiStickyNoteAddLine className='h-4 w-4' />
|
||||
</div>
|
||||
</TipPopup>
|
||||
<Divider type='vertical' className='h-3.5 mx-0.5' />
|
||||
<Divider type='vertical' className='mx-0.5 h-3.5' />
|
||||
<TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center mr-[1px] w-8 h-8 rounded-lg cursor-pointer',
|
||||
'mr-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
|
||||
controlMode === ControlMode.Pointer ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
|
||||
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
|
||||
)}
|
||||
onClick={handleModePointer}
|
||||
>
|
||||
<RiCursorLine className='w-4 h-4' />
|
||||
<RiCursorLine className='h-4 w-4' />
|
||||
</div>
|
||||
</TipPopup>
|
||||
<TipPopup title={t('workflow.common.handMode')} shortcuts={['h']}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer',
|
||||
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
|
||||
controlMode === ControlMode.Hand ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
|
||||
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
|
||||
)}
|
||||
onClick={handleModeHand}
|
||||
>
|
||||
<RiHand className='w-4 h-4' />
|
||||
<RiHand className='h-4 w-4' />
|
||||
</div>
|
||||
</TipPopup>
|
||||
<Divider type='vertical' className='h-3.5 mx-0.5' />
|
||||
<Divider type='vertical' className='mx-0.5 h-3.5' />
|
||||
<TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
|
||||
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
|
||||
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
|
||||
)}
|
||||
onClick={handleLayout}
|
||||
>
|
||||
<RiFunctionAddLine className='w-4 h-4' />
|
||||
<RiFunctionAddLine className='h-4 w-4' />
|
||||
</div>
|
||||
</TipPopup>
|
||||
</div>
|
||||
|
||||
@@ -20,10 +20,10 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
|
||||
height: 72,
|
||||
}}
|
||||
maskColor='var(--color-workflow-minimap-bg)'
|
||||
className='!absolute !left-4 !bottom-14 z-[9] !m-0 !w-[102px] !h-[72px] !border-[0.5px] !border-divider-subtle
|
||||
!rounded-lg !shadow-md !shadow-shadow-shadow-5 !bg-background-default-subtle'
|
||||
className='!absolute !bottom-14 !left-4 z-[9] !m-0 !h-[72px] !w-[102px] !rounded-lg !border-[0.5px]
|
||||
!border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5'
|
||||
/>
|
||||
<div className='flex items-center mt-1 gap-2 absolute left-4 bottom-4 z-[9]'>
|
||||
<div className='absolute bottom-4 left-4 z-[9] mt-1 flex items-center gap-2'>
|
||||
<ZoomInOut />
|
||||
<UndoRedo handleUndo={handleUndo} handleRedo={handleRedo} />
|
||||
<Control />
|
||||
|
||||
@@ -17,7 +17,7 @@ const TipPopup = ({
|
||||
offset={4}
|
||||
popupClassName='p-0 bg-transparent'
|
||||
popupContent={
|
||||
<div className='flex items-center gap-1 p-1.5 backdrop-blur-[5px] shadow-lg rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg'>
|
||||
<div className='flex items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 shadow-lg backdrop-blur-[5px]'>
|
||||
<span className='system-xs-medium text-text-secondary'>{title}</span>
|
||||
{
|
||||
shortcuts && <ShortcutsName keys={shortcuts} />
|
||||
|
||||
@@ -131,20 +131,20 @@ const ZoomInOut: FC = () => {
|
||||
>
|
||||
<PortalToFollowElemTrigger asChild>
|
||||
<div className={`
|
||||
p-0.5 h-9 cursor-pointer text-[13px] backdrop-blur-[5px] rounded-lg
|
||||
bg-components-actionbar-bg shadow-lg border-[0.5px] border-components-actionbar-border
|
||||
h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg
|
||||
p-0.5 text-[13px] shadow-lg backdrop-blur-[5px]
|
||||
hover:bg-state-base-hover
|
||||
${workflowReadOnly && '!cursor-not-allowed opacity-50'}
|
||||
`}>
|
||||
<div className={cn(
|
||||
'flex items-center justify-between w-[98px] h-8 rounded-lg',
|
||||
'flex h-8 w-[98px] items-center justify-between rounded-lg',
|
||||
)}>
|
||||
<TipPopup
|
||||
title={t('workflow.operator.zoomOut')}
|
||||
shortcuts={['ctrl', '-']}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-center w-8 h-8 rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
|
||||
onClick={(e) => {
|
||||
if (zoom <= 0.25)
|
||||
return
|
||||
@@ -153,16 +153,16 @@ const ZoomInOut: FC = () => {
|
||||
zoomOut()
|
||||
}}
|
||||
>
|
||||
<RiZoomOutLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
|
||||
<RiZoomOutLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' />
|
||||
</div>
|
||||
</TipPopup>
|
||||
<div onClick={handleTrigger} className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
|
||||
<div onClick={handleTrigger} className={cn('system-sm-medium w-[34px] text-text-tertiary hover:text-text-secondary')}>{Number.parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
|
||||
<TipPopup
|
||||
title={t('workflow.operator.zoomIn')}
|
||||
shortcuts={['ctrl', '+']}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-center w-8 h-8 rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
|
||||
onClick={(e) => {
|
||||
if (zoom >= 2)
|
||||
return
|
||||
@@ -171,14 +171,14 @@ const ZoomInOut: FC = () => {
|
||||
zoomIn()
|
||||
}}
|
||||
>
|
||||
<RiZoomInLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
|
||||
<RiZoomInLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' />
|
||||
</div>
|
||||
</TipPopup>
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='w-[145px] backdrop-blur-[5px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
|
||||
<div className='w-[145px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
|
||||
{
|
||||
ZOOM_IN_OUT_OPTIONS.map((options, i) => (
|
||||
<Fragment key={i}>
|
||||
@@ -192,7 +192,7 @@ const ZoomInOut: FC = () => {
|
||||
options.map(option => (
|
||||
<div
|
||||
key={option.key}
|
||||
className='flex items-center justify-between space-x-1 py-1.5 pl-3 pr-2 h-8 rounded-lg hover:bg-state-base-hover cursor-pointer system-md-regular text-text-secondary'
|
||||
className='system-md-regular flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pl-3 pr-2 text-text-secondary hover:bg-state-base-hover'
|
||||
onClick={() => handleZoom(option.key)}
|
||||
>
|
||||
<span>{option.text}</span>
|
||||
|
||||
Reference in New Issue
Block a user