| | |
| | | <PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}> |
| | | <div |
| | | className={cn( |
| | | 'relative ml-0.5 flex h-7 w-7 items-center justify-center rounded-md', |
| | | disabled && 'cursor-not-allowed opacity-50', |
| | | 'relative ml-0.5 flex items-center justify-center w-7 h-7 rounded-md', |
| | | disabled && 'opacity-50 cursor-not-allowed', |
| | | )} |
| | | > |
| | | <div |
| | | className={cn('group flex h-full w-full cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')} |
| | | className={cn('group flex items-center justify-center w-full h-full rounded-md cursor-pointer hover:bg-state-accent-hover', open && 'bg-state-accent-hover')} |
| | | > |
| | | <RiListCheck3 |
| | | className={cn('h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} |
| | | className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} |
| | | /> |
| | | </div> |
| | | { |
| | | !!needWarningNodes.length && ( |
| | | <div className='absolute -right-1.5 -top-1.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-gray-100 bg-[#F79009] text-[11px] font-semibold text-white'> |
| | | <div className='absolute -right-1.5 -top-1.5 flex items-center justify-center min-w-[18px] h-[18px] rounded-full border border-gray-100 text-white text-[11px] font-semibold bg-[#F79009]'> |
| | | {needWarningNodes.length} |
| | | </div> |
| | | ) |
| | |
| | | </PortalToFollowElemTrigger> |
| | | <PortalToFollowElemContent className='z-[12]'> |
| | | <div |
| | | className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg' |
| | | className='w-[420px] rounded-2xl bg-white border-[0.5px] border-black/5 shadow-lg overflow-y-auto' |
| | | style={{ |
| | | maxHeight: 'calc(2 / 3 * 100vh)', |
| | | }} |
| | | > |
| | | <div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-components-panel-bg pl-4 pr-3 pt-3 font-semibold text-text-primary'> |
| | | <div className='sticky top-0 bg-white flex items-center pl-4 pr-3 pt-3 h-[44px] text-md font-semibold text-gray-900 z-[1]'> |
| | | <div className='grow'>{t('workflow.panel.checklist')}{needWarningNodes.length ? `(${needWarningNodes.length})` : ''}</div> |
| | | <div |
| | | className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center' |
| | | className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer' |
| | | onClick={() => setOpen(false)} |
| | | > |
| | | <RiCloseLine className='h-4 w-4 text-text-tertiary' /> |
| | | <RiCloseLine className='w-4 h-4 text-gray-500' /> |
| | | </div> |
| | | </div> |
| | | <div className='py-2'> |
| | | { |
| | | !!needWarningNodes.length && ( |
| | | <> |
| | | <div className='px-4 text-xs text-text-tertiary'>{t('workflow.panel.checklistTip')}</div> |
| | | <div className='px-4 text-xs text-gray-400'>{t('workflow.panel.checklistTip')}</div> |
| | | <div className='px-4 py-2'> |
| | | { |
| | | needWarningNodes.map(node => ( |
| | | <div |
| | | key={node.id} |
| | | className='mb-2 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0' |
| | | className='mb-2 last-of-type:mb-0 border-[0.5px] border-gray-200 bg-white shadow-xs rounded-lg cursor-pointer' |
| | | onClick={() => { |
| | | handleNodeSelect(node.id) |
| | | setOpen(false) |
| | | }} |
| | | > |
| | | <div className='flex h-9 items-center p-2 text-xs font-medium text-text-secondary'> |
| | | <div className='flex items-center p-2 h-9 text-xs font-medium text-gray-700'> |
| | | <BlockIcon |
| | | type={node.type} |
| | | className='mr-1.5' |
| | |
| | | {node.title} |
| | | </span> |
| | | </div> |
| | | <div className='border-t-[0.5px] border-divider-regular'> |
| | | <div className='border-t-[0.5px] border-t-black/2'> |
| | | { |
| | | node.unConnected && ( |
| | | <div className='px-3 py-2 last:rounded-b-lg'> |
| | | <div className='flex text-xs leading-[18px] text-text-tertiary'> |
| | | <AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' /> |
| | | <div className='px-3 py-2 bg-gray-25 rounded-b-lg'> |
| | | <div className='flex text-xs leading-[18px] text-gray-500'> |
| | | <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' /> |
| | | {t('workflow.common.needConnectTip')} |
| | | </div> |
| | | </div> |
| | |
| | | } |
| | | { |
| | | node.errorMessage && ( |
| | | <div className='px-3 py-2 last:rounded-b-lg'> |
| | | <div className='flex text-xs leading-[18px] text-text-tertiary'> |
| | | <AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' /> |
| | | <div className='px-3 py-2 bg-gray-25 rounded-b-lg'> |
| | | <div className='flex text-xs leading-[18px] text-gray-500'> |
| | | <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' /> |
| | | {node.errorMessage} |
| | | </div> |
| | | </div> |
| | |
| | | } |
| | | { |
| | | !needWarningNodes.length && ( |
| | | <div className='mx-4 mb-3 rounded-lg bg-components-panel-bg py-4 text-center text-xs text-text-tertiary'> |
| | | <ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-text-quaternary' /> |
| | | <div className='mx-4 mb-3 py-4 rounded-lg bg-gray-50 text-gray-400 text-xs text-center'> |
| | | <ChecklistSquare className='mx-auto mb-[5px] w-8 h-8 text-gray-300' /> |
| | | {t('workflow.panel.checklistResolved')} |
| | | </div> |
| | | ) |