AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 20:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Dark Mode: Workflow darkmode style (#11695)

Browse Source
This commit is contained in:
NFish 2024-12-17 12:20:49 +08:00 committed by GitHub
parent 92a840f1b2
commit a399502ecd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 179 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/tools/add-tool-modal/empty.tsx
View File

@ -6,8 +6,8 @@ const Empty = () => {
return ( return (
<div className='flex flex-col items-center'> <div className='flex flex-col items-center'>
<div className="shrink-0 w-[163px] h-[149px] bg-cover bg-no-repeat bg-[url('~@/app/components/tools/add-tool-modal/empty.png')]"></div> <div className="shrink-0 w-[163px] h-[149px] bg-cover bg-no-repeat bg-[url('~@/app/components/tools/add-tool-modal/empty.png')]"></div>
<div className='mb-1 text-[13px] font-medium text-gray-700 leading-[18px]'>{t('tools.addToolModal.emptyTitle')}</div> <div className='mb-1 text-[13px] font-medium text-text-primary leading-[18px]'>{t('tools.addToolModal.emptyTitle')}</div>
<div className='text-[13px] text-gray-500 leading-[18px]'>{t('tools.addToolModal.emptyTip')}</div> <div className='text-[13px] text-text-tertiary leading-[18px]'>{t('tools.addToolModal.emptyTip')}</div>
</div> </div>
) )
} }

16
web/app/components/workflow/block-selector/all-tools.tsx
View File

@ -43,23 +43,23 @@ const AllTools = ({
return mergedTools.filter((toolWithProvider) => { return mergedTools.filter((toolWithProvider) => {
return isMatchingKeywords(toolWithProvider.name, searchText) return isMatchingKeywords(toolWithProvider.name, searchText)
|| toolWithProvider.tools.some((tool) => { || toolWithProvider.tools.some((tool) => {
return Object.values(tool.label).some((label) => { return Object.values(tool.label).some((label) => {
return isMatchingKeywords(label, searchText) return isMatchingKeywords(label, searchText)
})
}) })
})
}) })
}, [activeTab, buildInTools, customTools, workflowTools, searchText]) }, [activeTab, buildInTools, customTools, workflowTools, searchText])
return ( return (
<div> <div>
<div className='flex items-center px-3 h-8 space-x-1 bg-gray-25 border-b-[0.5px] border-black/[0.08] shadow-xs'> <div className='flex items-center px-3 h-8 space-x-1 bg-background-default-hover border-b-[0.5px] border-divider-subtle shadow-xs'>
{ {
tabs.map(tab => ( tabs.map(tab => (
<div <div
className={cn( className={cn(
'flex items-center px-2 h-6 rounded-md hover:bg-gray-100 cursor-pointer', 'flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover-alt cursor-pointer',
'text-xs font-medium text-gray-700', 'system-xs-medium text-text-tertiary',
activeTab === tab.key && 'bg-gray-200', activeTab === tab.key && 'system-xs-semibold bg-state-base-hover-alt text-text-primary',
)} )}
key={tab.key} key={tab.key}
onClick={() => setActiveTab(tab.key)} onClick={() => setActiveTab(tab.key)}

14
web/app/components/workflow/block-selector/blocks.tsx
View File

@ -58,7 +58,7 @@ const Blocks = ({
> >
{ {
classification !== '-' && !!list.length && ( classification !== '-' && !!list.length && (
<div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'> <div className='flex items-start px-3 h-[22px] text-xs font-medium text-text-tertiary'>
{t(`workflow.tabs.${classification}`)} {t(`workflow.tabs.${classification}`)}
</div> </div>
) )
@ -68,7 +68,7 @@ const Blocks = ({
<Tooltip <Tooltip
key={block.type} key={block.type}
position='right' position='right'
popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg' popupClassName='w-[200px]'
popupContent={( popupContent={(
<div> <div>
<BlockIcon <BlockIcon
@ -76,21 +76,21 @@ const Blocks = ({
className='mb-2' className='mb-2'
type={block.type} type={block.type}
/> />
<div className='mb-1 text-sm leading-5 text-gray-900'>{block.title}</div> <div className='mb-1 system-md-medium text-text-primary'>{block.title}</div>
<div className='text-xs text-gray-700 leading-[18px]'>{nodesExtraData[block.type].about}</div> <div className='text-text-tertiary system-xs-regular'>{nodesExtraData[block.type].about}</div>
</div> </div>
)} )}
> >
<div <div
key={block.type} key={block.type}
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer' className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
onClick={() => onSelect(block.type)} onClick={() => onSelect(block.type)}
> >
<BlockIcon <BlockIcon
className='mr-2 shrink-0' className='mr-2 shrink-0'
type={block.type} type={block.type}
/> />
<div className='text-sm text-gray-900'>{block.title}</div> <div className='text-sm text-text-secondary'>{block.title}</div>
</div> </div>
</Tooltip> </Tooltip>
)) ))
@ -103,7 +103,7 @@ const Blocks = ({
<div className='p-1'> <div className='p-1'>
{ {
isEmpty && ( isEmpty && (
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div> <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
) )
} }
{ {

4
web/app/components/workflow/block-selector/index-bar.tsx
View File

@ -47,9 +47,9 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
element.scrollIntoView({ behavior: 'smooth' }) element.scrollIntoView({ behavior: 'smooth' })
} }
return ( return (
<div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-gray-500"> <div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-text-quaternary">
{letters.map(letter => ( {letters.map(letter => (
<div className="hover:text-gray-900 cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}> <div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
{letter} {letter}
</div> </div>
))} ))}

11
web/app/components/workflow/block-selector/index.tsx
View File

@ -25,6 +25,7 @@ import Input from '@/app/components/base/input'
import { import {
Plus02, Plus02,
} from '@/app/components/base/icons/src/vender/line/general' } from '@/app/components/base/icons/src/vender/line/general'
import classNames from '@/utils/classnames'
type NodeSelectorProps = { type NodeSelectorProps = {
open?: boolean open?: boolean
@ -114,19 +115,21 @@ const NodeSelector: FC<NodeSelectorProps> = ({
<div <div
className={` className={`
flex items-center justify-center flex items-center justify-center
w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10 w-4 h-4 rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover cursor-pointer z-10
${triggerClassName?.(open)} ${triggerClassName?.(open)}
`} `}
style={triggerStyle} style={triggerStyle}
> >
<Plus02 className='w-2.5 h-2.5 text-white' /> <Plus02 className='w-2.5 h-2.5' />
</div> </div>
) )
} }
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'> <PortalToFollowElemContent className='z-[1000]'>
<div className={`rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}> <div className={
<div className='px-2 pt-2' onClick={e => e.stopPropagation()}> classNames(`rounded-lg border-[0.5px] backdrop-blur-[5px]
border-components-panel-border bg-components-panel-bg-blur shadow-lg`, popupClassName)}>
<div className='p-2 pb-1' onClick={e => e.stopPropagation()}>
<Input <Input
showLeftIcon showLeftIcon
showClearIcon showClearIcon

8
web/app/components/workflow/block-selector/tabs.tsx
View File

@ -30,16 +30,16 @@ const Tabs: FC<TabsProps> = ({
<div onClick={e => e.stopPropagation()}> <div onClick={e => e.stopPropagation()}>
{ {
!noBlocks && ( !noBlocks && (
<div className='flex items-center px-3 border-b-[0.5px] border-b-black/5'> <div className='flex items-center px-3 border-b-[0.5px] border-divider-subtle'>
{ {
tabs.map(tab => ( tabs.map(tab => (
<div <div
key={tab.key} key={tab.key}
className={cn( className={cn(
'relative mr-4 h-[34px] text-[13px] leading-[34px] font-medium cursor-pointer', 'relative mr-4 pt-1 pb-2 system-sm-medium cursor-pointer',
activeTab === tab.key activeTab === tab.key
? 'text-gray-700 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-primary-600' ? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
: 'text-gray-500', : 'text-text-tertiary',
)} )}
onClick={() => onActiveTabChange(tab.key)} onClick={() => onActiveTabChange(tab.key)}
> >

12
web/app/components/workflow/block-selector/tools.tsx
View File

@ -45,7 +45,7 @@ const Blocks = ({
<Tooltip <Tooltip
key={tool.name} key={tool.name}
position='right' position='right'
popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg' popupClassName='w-[200px]'
popupContent={( popupContent={(
<div> <div>
<BlockIcon <BlockIcon
@ -54,13 +54,13 @@ const Blocks = ({
type={BlockEnum.Tool} type={BlockEnum.Tool}
toolIcon={toolWithProvider.icon} toolIcon={toolWithProvider.icon}
/> />
<div className='mb-1 text-sm leading-5 text-gray-900'>{tool.label[language]}</div> <div className='mb-1 system-md-medium text-text-primary'>{tool.label[language]}</div>
<div className='text-xs text-gray-700 leading-[18px]'>{tool.description[language]}</div> <div className='system-xs-regular text-text-tertiary'>{tool.description[language]}</div>
</div> </div>
)} )}
> >
<div <div
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer' className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
onClick={() => onSelect(BlockEnum.Tool, { onClick={() => onSelect(BlockEnum.Tool, {
provider_id: toolWithProvider.id, provider_id: toolWithProvider.id,
provider_type: toolWithProvider.type, provider_type: toolWithProvider.type,
@ -75,7 +75,7 @@ const Blocks = ({
type={BlockEnum.Tool} type={BlockEnum.Tool}
toolIcon={toolWithProvider.icon} toolIcon={toolWithProvider.icon}
/> />
<div className='text-sm text-gray-900 flex-1 min-w-0 truncate'>{tool.label[language]}</div> <div className='text-sm text-text-secondary flex-1 min-w-0 truncate'>{tool.label[language]}</div>
</div> </div>
</Tooltip> </Tooltip>
)) ))
@ -100,7 +100,7 @@ const Blocks = ({
<div className='p-1 max-w-[320px] max-h-[464px] overflow-y-auto'> <div className='p-1 max-w-[320px] max-h-[464px] overflow-y-auto'>
{ {
!tools.length && !showWorkflowEmpty && ( !tools.length && !showWorkflowEmpty && (
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div> <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
) )
} }
{!tools.length && showWorkflowEmpty && ( {!tools.length && showWorkflowEmpty && (

2
web/app/components/workflow/header/editing-title.tsx
View File

@ -13,7 +13,7 @@ const EditingTitle = () => {
const isSyncingWorkflowDraft = useStore(s => s.isSyncingWorkflowDraft) const isSyncingWorkflowDraft = useStore(s => s.isSyncingWorkflowDraft)
return ( return (
<div className='flex items-center h-[18px] text-xs text-gray-500'> <div className='flex items-center h-[18px] system-xs-regular text-text-tertiary'>
{ {
!!draftUpdatedAt && ( !!draftUpdatedAt && (
<> <>

20
web/app/components/workflow/header/index.tsx
View File

@ -27,6 +27,7 @@ import {
} from '../hooks' } from '../hooks'
import AppPublisher from '../../app/app-publisher' import AppPublisher from '../../app/app-publisher'
import { ToastContext } from '../../base/toast' import { ToastContext } from '../../base/toast'
import Divider from '../../base/divider'
import RunAndHistory from './run-and-history' import RunAndHistory from './run-and-history'
import EditingTitle from './editing-title' import EditingTitle from './editing-title'
import RunningTitle from './running-title' import RunningTitle from './running-title'
@ -144,15 +145,12 @@ const Header: FC = () => {
return ( return (
<div <div
className='absolute top-0 left-0 z-10 flex items-center justify-between w-full px-3 h-14' className='absolute top-0 left-0 z-10 flex items-center justify-between w-full px-3 h-14 bg-mask-top2bottom-gray-50-to-transparent'
style={{
background: 'linear-gradient(180deg, #F9FAFB 0%, rgba(249, 250, 251, 0.00) 100%)',
}}
> >
<div> <div>
{ {
appSidebarExpand === 'collapse' && ( appSidebarExpand === 'collapse' && (
<div className='text-xs font-medium text-gray-700'>{appDetail?.name}</div> <div className='system-xs-regular text-text-tertiary'>{appDetail?.name}</div>
) )
} }
{ {
@ -171,7 +169,7 @@ const Header: FC = () => {
{/* <GlobalVariableButton disabled={nodesReadOnly} /> */} {/* <GlobalVariableButton disabled={nodesReadOnly} /> */}
{isChatMode && <ChatVariableButton disabled={nodesReadOnly} />} {isChatMode && <ChatVariableButton disabled={nodesReadOnly} />}
<EnvButton disabled={nodesReadOnly} /> <EnvButton disabled={nodesReadOnly} />
<div className='w-[1px] h-3.5 bg-gray-200'></div> <Divider type='vertical' className='h-3.5 mx-auto' />
<RunAndHistory /> <RunAndHistory />
<Button className='text-components-button-secondary-text' onClick={handleShowFeatures}> <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
<RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' /> <RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
@ -196,12 +194,11 @@ const Header: FC = () => {
} }
{ {
viewHistory && ( viewHistory && (
<div className='flex items-center'> <div className='flex items-center space-x-2'>
<ViewHistory withText /> <ViewHistory withText />
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div> <Divider type='vertical' className='h-3.5 mx-auto' />
<Button <Button
variant='primary' variant='primary'
className='mr-2'
onClick={handleGoBackToEdit} onClick={handleGoBackToEdit}
> >
<ArrowNarrowLeft className='w-4 h-4 mr-1' /> <ArrowNarrowLeft className='w-4 h-4 mr-1' />
@ -212,14 +209,13 @@ const Header: FC = () => {
} }
{ {
restoring && ( restoring && (
<div className='flex items-center'> <div className='flex items-center space-x-2'>
<Button className='text-components-button-secondary-text' onClick={handleShowFeatures}> <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
<RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' /> <RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
{t('workflow.common.features')} {t('workflow.common.features')}
</Button> </Button>
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div> <Divider type='vertical' className='h-3.5 mx-auto' />
<Button <Button
className='mr-2'
onClick={handleCancelRestore} onClick={handleCancelRestore}
> >
{t('common.operation.cancel')} {t('common.operation.cancel')}

29
web/app/components/workflow/header/undo-redo.tsx
View File

@ -7,8 +7,10 @@ import {
} from '@remixicon/react' } from '@remixicon/react'
import TipPopup from '../operator/tip-popup' import TipPopup from '../operator/tip-popup'
import { useWorkflowHistoryStore } from '../workflow-history-store' import { useWorkflowHistoryStore } from '../workflow-history-store'
import Divider from '../../base/divider'
import { useNodesReadOnly } from '@/app/components/workflow/hooks' import { useNodesReadOnly } from '@/app/components/workflow/hooks'
import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history' import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
import classNames from '@/utils/classnames'
export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void } export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void }
const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => { const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
@ -29,36 +31,35 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
const { nodesReadOnly } = useNodesReadOnly() const { nodesReadOnly } = useNodesReadOnly()
return ( return (
<div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'> <div className='flex items-center space-x-0.5 p-0.5 backdrop-blur-[5px] rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg'>
<TipPopup title={t('workflow.common.undo')!} shortcuts={['ctrl', 'z']}> <TipPopup title={t('workflow.common.undo')!} shortcuts={['ctrl', 'z']}>
<div <div
data-tooltip-id='workflow.undo' data-tooltip-id='workflow.undo'
className={` className={
flex items-center px-1.5 w-8 h-8 rounded-md text-[13px] font-medium classNames('flex items-center px-1.5 w-8 h-8 rounded-md system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer select-none',
hover:bg-black/5 hover:text-gray-700 cursor-pointer select-none (nodesReadOnly || buttonsDisabled.undo)
${(nodesReadOnly || buttonsDisabled.undo) && 'hover:bg-transparent opacity-50 !cursor-not-allowed'} && 'hover:bg-transparent text-text-disabled hover:text-text-disabled cursor-not-allowed')}
`}
onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()} onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
> >
<RiArrowGoBackLine className='h-4 w-4' /> <RiArrowGoBackLine className='h-4 w-4' />
</div> </div>
</TipPopup> </TipPopup >
<TipPopup title={t('workflow.common.redo')!} shortcuts={['ctrl', 'y']}> <TipPopup title={t('workflow.common.redo')!} shortcuts={['ctrl', 'y']}>
<div <div
data-tooltip-id='workflow.redo' data-tooltip-id='workflow.redo'
className={` className={
flex items-center px-1.5 w-8 h-8 rounded-md text-[13px] font-medium classNames('flex items-center px-1.5 w-8 h-8 rounded-md system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer select-none',
hover:bg-black/5 hover:text-gray-700 cursor-pointer select-none (nodesReadOnly || buttonsDisabled.redo)
${(nodesReadOnly || buttonsDisabled.redo) && 'hover:bg-transparent opacity-50 !cursor-not-allowed'} && 'hover:bg-transparent text-text-disabled hover:text-text-disabled cursor-not-allowed',
`} )}
onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()} onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}
> >
<RiArrowGoForwardFill className='h-4 w-4' /> <RiArrowGoForwardFill className='h-4 w-4' />
</div> </div>
</TipPopup> </TipPopup>
<div className="mx-[3px] w-[1px] h-3.5 bg-gray-200"></div> <Divider type='vertical' className="h-3.5 mx-0.5" />
<ViewWorkflowHistory /> <ViewWorkflowHistory />
</div> </div >
) )
} }

62
web/app/components/workflow/header/view-workflow-history.tsx
View File

@ -17,6 +17,7 @@ import {
} from '../hooks' } from '../hooks'
import TipPopup from '../operator/tip-popup' import TipPopup from '../operator/tip-popup'
import type { WorkflowHistoryState } from '../workflow-history-store' import type { WorkflowHistoryState } from '../workflow-history-store'
import Divider from '../../base/divider'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { import {
PortalToFollowElem, PortalToFollowElem,
@ -24,6 +25,7 @@ import {
PortalToFollowElemTrigger, PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem' } from '@/app/components/base/portal-to-follow-elem'
import { useStore as useAppStore } from '@/app/components/app/store' import { useStore as useAppStore } from '@/app/components/app/store'
import classNames from '@/utils/classnames'
type ChangeHistoryEntry = { type ChangeHistoryEntry = {
label: string label: string
@ -47,7 +49,7 @@ const ViewWorkflowHistory = () => {
setCurrentLogItem: state.setCurrentLogItem, setCurrentLogItem: state.setCurrentLogItem,
setShowMessageLogModal: state.setShowMessageLogModal, setShowMessageLogModal: state.setShowMessageLogModal,
}))) })))
const reactflowStore = useStoreApi() const reactFlowStore = useStoreApi()
const { store, getHistoryLabel } = useWorkflowHistory() const { store, getHistoryLabel } = useWorkflowHistory()
const { pastStates, futureStates, undo, redo, clear } = store.temporal.getState() const { pastStates, futureStates, undo, redo, clear } = store.temporal.getState()
@ -59,7 +61,7 @@ const ViewWorkflowHistory = () => {
}, [clear]) }, [clear])
const handleSetState = useCallback(({ index }: ChangeHistoryEntry) => { const handleSetState = useCallback(({ index }: ChangeHistoryEntry) => {
const { setEdges, setNodes } = reactflowStore.getState() const { setEdges, setNodes } = reactFlowStore.getState()
const diff = currentHistoryStateIndex + index const diff = currentHistoryStateIndex + index
if (diff === 0) if (diff === 0)
return return
@ -75,7 +77,7 @@ const ViewWorkflowHistory = () => {
setEdges(edges) setEdges(edges)
setNodes(nodes) setNodes(nodes)
}, [currentHistoryStateIndex, reactflowStore, redo, store, undo]) }, [currentHistoryStateIndex, reactFlowStore, redo, store, undo])
const calculateStepLabel = useCallback((index: number) => { const calculateStepLabel = useCallback((index: number) => {
if (!index) if (!index)
@ -83,8 +85,7 @@ const ViewWorkflowHistory = () => {
const count = index < 0 ? index * -1 : index const count = index < 0 ? index * -1 : index
return `${index > 0 ? t('workflow.changeHistory.stepForward', { count }) : t('workflow.changeHistory.stepBackward', { count })}` return `${index > 0 ? t('workflow.changeHistory.stepForward', { count }) : t('workflow.changeHistory.stepBackward', { count })}`
} }, [t])
, [t])
const calculateChangeList: ChangeHistoryList = useMemo(() => { const calculateChangeList: ChangeHistoryList = useMemo(() => {
const filterList = (list: any, startIndex = 0, reverse = false) => list.map((state: Partial<WorkflowHistoryState>, index: number) => { const filterList = (list: any, startIndex = 0, reverse = false) => list.map((state: Partial<WorkflowHistoryState>, index: number) => {
@ -125,10 +126,11 @@ const ViewWorkflowHistory = () => {
title={t('workflow.changeHistory.title')} title={t('workflow.changeHistory.title')}
> >
<div <div
className={` className={
flex items-center justify-center w-8 h-8 rounded-md hover:bg-black/5 cursor-pointer classNames('flex items-center justify-center w-8 h-8 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
${open && 'bg-primary-50'} ${nodesReadOnly && 'bg-primary-50 opacity-50 !cursor-not-allowed'} open && 'bg-state-accent-active text-text-accent',
`} nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
)}
onClick={() => { onClick={() => {
if (nodesReadOnly) if (nodesReadOnly)
return return
@ -136,16 +138,16 @@ const ViewWorkflowHistory = () => {
setShowMessageLogModal(false) setShowMessageLogModal(false)
}} }}
> >
<RiHistoryLine className={`w-4 h-4 hover:bg-black/5 hover:text-gray-700 ${open ? 'text-primary-600' : 'text-gray-500'}`} /> <RiHistoryLine className='w-4 h-4' />
</div> </div>
</TipPopup> </TipPopup>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[12]'> <PortalToFollowElemContent className='z-[12]'>
<div <div
className='flex flex-col ml-2 min-w-[240px] max-w-[360px] bg-white border-[0.5px] border-gray-200 shadow-xl rounded-xl overflow-y-auto' className='flex flex-col ml-2 min-w-[240px] max-w-[360px] bg-components-panel-bg-blur backdrop-blur-[5px] border-[0.5px] border-components-panel-border shadow-xl rounded-xl overflow-y-auto'
> >
<div className='sticky top-0 bg-white flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'> <div className='sticky top-0 flex items-center justify-between px-4 pt-3'>
<div className='grow'>{t('workflow.changeHistory.title')}</div> <div className='grow text-text-secondary system-mg-regular'>{t('workflow.changeHistory.title')}</div>
<div <div
className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer' className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer'
onClick={() => { onClick={() => {
@ -154,7 +156,7 @@ const ViewWorkflowHistory = () => {
setOpen(false) setOpen(false)
}} }}
> >
<RiCloseLine className='w-4 h-4 text-gray-500' /> <RiCloseLine className='w-4 h-4 text-text-secondary' />
</div> </div>
</div> </div>
{ {
@ -168,8 +170,8 @@ const ViewWorkflowHistory = () => {
{ {
!calculateChangeList.statesCount && ( !calculateChangeList.statesCount && (
<div className='py-12'> <div className='py-12'>
<RiHistoryLine className='mx-auto mb-2 w-8 h-8 text-gray-300' /> <RiHistoryLine className='mx-auto mb-2 w-8 h-8 text-text-tertiary' />
<div className='text-center text-[13px] text-gray-400'> <div className='text-center text-[13px] text-text-tertiary'>
{t('workflow.changeHistory.placeholder')} {t('workflow.changeHistory.placeholder')}
</div> </div>
</div> </div>
@ -181,8 +183,8 @@ const ViewWorkflowHistory = () => {
<div <div
key={item?.index} key={item?.index}
className={cn( className={cn(
'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer', 'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-state-base-hover text-text-secondary cursor-pointer',
item?.index === currentHistoryStateIndex && 'bg-primary-50', item?.index === currentHistoryStateIndex && 'bg-state-base-hover',
)} )}
onClick={() => { onClick={() => {
handleSetState(item) handleSetState(item)
@ -192,8 +194,7 @@ const ViewWorkflowHistory = () => {
<div> <div>
<div <div
className={cn( className={cn(
'flex items-center text-[13px] font-medium leading-[18px]', 'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
item?.index === currentHistoryStateIndex && 'text-primary-600',
)} )}
> >
{item?.label || t('workflow.changeHistory.sessionStart')} ({calculateStepLabel(item?.index)}{item?.index === currentHistoryStateIndex && t('workflow.changeHistory.currentState')}) {item?.label || t('workflow.changeHistory.sessionStart')} ({calculateStepLabel(item?.index)}{item?.index === currentHistoryStateIndex && t('workflow.changeHistory.currentState')})
@ -207,8 +208,8 @@ const ViewWorkflowHistory = () => {
<div <div
key={item?.index} key={item?.index}
className={cn( className={cn(
'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer', 'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-state-base-hover cursor-pointer',
item?.index === calculateChangeList.statesCount - 1 && 'bg-primary-50', item?.index === calculateChangeList.statesCount - 1 && 'bg-state-base-hover',
)} )}
onClick={() => { onClick={() => {
handleSetState(item) handleSetState(item)
@ -218,8 +219,7 @@ const ViewWorkflowHistory = () => {
<div> <div>
<div <div
className={cn( className={cn(
'flex items-center text-[13px] font-medium leading-[18px]', 'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
item?.index === calculateChangeList.statesCount - 1 && 'text-primary-600',
)} )}
> >
{item?.label || t('workflow.changeHistory.sessionStart')} ({calculateStepLabel(item?.index)}) {item?.label || t('workflow.changeHistory.sessionStart')} ({calculateStepLabel(item?.index)})
@ -234,12 +234,12 @@ const ViewWorkflowHistory = () => {
} }
{ {
!!calculateChangeList.statesCount && ( !!calculateChangeList.statesCount && (
<> <div className='px-0.5'>
<div className="h-[1px] bg-gray-100" /> <Divider className='m-0' />
<div <div
className={cn( className={cn(
'flex my-0.5 px-2 py-[7px] rounded-lg cursor-pointer', 'flex my-0.5 px-2 py-[7px] rounded-lg text-text-secondary cursor-pointer',
'hover:bg-red-50 hover:text-red-600', 'hover:bg-state-base-hover',
)} )}
onClick={() => { onClick={() => {
handleClearHistory() handleClearHistory()
@ -256,12 +256,12 @@ const ViewWorkflowHistory = () => {
</div> </div>
</div> </div>
</div> </div>
</> </div>
) )
} }
<div className="px-3 w-[240px] py-2 text-xs text-gray-500" > <div className="px-3 w-[240px] py-2 text-xs text-text-tertiary" >
<div className="flex items-center mb-1 h-[22px] font-medium uppercase">{t('workflow.changeHistory.hint')}</div> <div className="flex items-center mb-1 h-[22px] font-medium uppercase">{t('workflow.changeHistory.hint')}</div>
<div className="mb-1 text-gray-700 leading-[18px]">{t('workflow.changeHistory.hintText')}</div> <div className="mb-1 text-text-tertiary leading-[18px]">{t('workflow.changeHistory.hintText')}</div>
</div> </div>
</div> </div>
</PortalToFollowElemContent> </PortalToFollowElemContent>

9
web/app/components/workflow/index.tsx
View File

@ -179,7 +179,7 @@ const Workflow: FC<WorkflowProps> = memo(({
return () => { return () => {
handleSyncWorkflowDraft(true, true) handleSyncWorkflowDraft(true, true)
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])
const { handleRefreshWorkflowDraft } = useWorkflowUpdate() const { handleRefreshWorkflowDraft } = useWorkflowUpdate()
@ -280,7 +280,7 @@ const Workflow: FC<WorkflowProps> = memo(({
<div <div
id='workflow-container' id='workflow-container'
className={` className={`
relative w-full min-w-[960px] h-full bg-[#F0F2F7] relative w-full min-w-[960px] h-full
${workflowReadOnly && 'workflow-panel-animation'} ${workflowReadOnly && 'workflow-panel-animation'}
${nodeAnimation && 'workflow-node-animation'} ${nodeAnimation && 'workflow-node-animation'}
`} `}
@ -371,7 +371,8 @@ const Workflow: FC<WorkflowProps> = memo(({
<Background <Background
gap={[14, 14]} gap={[14, 14]}
size={2} size={2}
color='#E4E5E7' className="bg-workflow-canvas-workflow-bg"
color='var(--color-workflow-canvas-workflow-dot-color)'
/> />
</ReactFlow> </ReactFlow>
</div> </div>
@ -401,7 +402,7 @@ const WorkflowWrap = memo(() => {
if (!data || isLoading) { if (!data || isLoading) {
return ( return (
<div className='flex justify-center items-center relative w-full h-full bg-[#F0F2F7]'> <div className='flex justify-center items-center relative w-full h-full'>
<Loading /> <Loading />
</div> </div>
) )

6
web/app/components/workflow/operator/add-block.tsx
View File

@ -78,9 +78,9 @@ const AddBlock = ({
title={t('workflow.common.addBlock')} title={t('workflow.common.addBlock')}
> >
<div className={cn( <div className={cn(
'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer', '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',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`, `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
open && '!bg-black/5', open && 'bg-state-accent-active text-text-accent',
)}> )}>
<RiAddCircleFill className='w-4 h-4' /> <RiAddCircleFill className='w-4 h-4' />
</div> </div>

23
web/app/components/workflow/operator/control.tsx
View File

@ -18,6 +18,7 @@ import {
ControlMode, ControlMode,
} from '../types' } from '../types'
import { useStore } from '../store' import { useStore } from '../store'
import Divider from '../../base/divider'
import AddBlock from './add-block' import AddBlock from './add-block'
import TipPopup from './tip-popup' import TipPopup from './tip-popup'
import { useOperator } from './hooks' import { useOperator } from './hooks'
@ -43,26 +44,26 @@ const Control = () => {
} }
return ( return (
<div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'> <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'>
<AddBlock /> <AddBlock />
<TipPopup title={t('workflow.nodes.note.addNote')}> <TipPopup title={t('workflow.nodes.note.addNote')}>
<div <div
className={cn( className={cn(
'flex items-center justify-center ml-[1px] w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer', 'flex items-center justify-center ml-[1px] w-8 h-8 rounded-lg hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`, `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)} )}
onClick={addNote} onClick={addNote}
> >
<RiStickyNoteAddLine className='w-4 h-4' /> <RiStickyNoteAddLine className='w-4 h-4' />
</div> </div>
</TipPopup> </TipPopup>
<div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div> <Divider type='vertical' className='h-3.5 mx-0.5' />
<TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}> <TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}>
<div <div
className={cn( className={cn(
'flex items-center justify-center mr-[1px] w-8 h-8 rounded-lg cursor-pointer', 'flex items-center justify-center mr-[1px] w-8 h-8 rounded-lg cursor-pointer',
controlMode === ControlMode.Pointer ? 'bg-primary-50 text-primary-600' : 'hover:bg-black/5 hover:text-gray-700', controlMode === ControlMode.Pointer ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`, `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)} )}
onClick={handleModePointer} onClick={handleModePointer}
> >
@ -73,20 +74,20 @@ const Control = () => {
<div <div
className={cn( className={cn(
'flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer', 'flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer',
controlMode === ControlMode.Hand ? 'bg-primary-50 text-primary-600' : 'hover:bg-black/5 hover:text-gray-700', controlMode === ControlMode.Hand ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`, `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)} )}
onClick={handleModeHand} onClick={handleModeHand}
> >
<RiHand className='w-4 h-4' /> <RiHand className='w-4 h-4' />
</div> </div>
</TipPopup> </TipPopup>
<div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div> <Divider type='vertical' className='h-3.5 mx-0.5' />
<TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}> <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
<div <div
className={cn( className={cn(
'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer', 'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`, `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)} )}
onClick={handleLayout} onClick={handleLayout}
> >

4
web/app/components/workflow/operator/index.tsx
View File

@ -17,7 +17,9 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
width: 102, width: 102,
height: 72, height: 72,
}} }}
className='!absolute !left-4 !bottom-14 z-[9] !m-0 !w-[102px] !h-[72px] !border-[0.5px] !border-black/8 !rounded-lg !shadow-lg' maskColor='var(--color-shadow-shadow-5)'
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-workflow-minimap-bg'
/> />
<div className='flex items-center mt-1 gap-2 absolute left-4 bottom-4 z-[9]'> <div className='flex items-center mt-1 gap-2 absolute left-4 bottom-4 z-[9]'>
<ZoomInOut /> <ZoomInOut />

8
web/app/components/workflow/operator/tip-popup.tsx
View File

@ -15,12 +15,12 @@ const TipPopup = ({
return ( return (
<Tooltip <Tooltip
offset={4} offset={4}
popupClassName='!p-0 !bg-gray-25' popupClassName='p-0 bg-transparent'
popupContent={ popupContent={
<div className='flex items-center gap-1 px-2 h-6 text-xs font-medium text-gray-700 rounded-lg border-[0.5px] border-black/5'> <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'>
{title} <span className='system-xs-medium text-text-secondary'>{title}</span>
{ {
shortcuts && <ShortcutsName keys={shortcuts} className='!text-[11px]' /> shortcuts && <ShortcutsName keys={shortcuts} />
} }
</div> </div>
} }

62
web/app/components/workflow/operator/zoom-in-out.tsx
View File

@ -18,10 +18,9 @@ import {
useNodesSyncDraft, useNodesSyncDraft,
useWorkflowReadOnly, useWorkflowReadOnly,
} from '../hooks' } from '../hooks'
import {
getKeyboardKeyNameBySystem,
} from '../utils'
import ShortcutsName from '../shortcuts-name' import ShortcutsName from '../shortcuts-name'
import Divider from '../../base/divider'
import TipPopup from './tip-popup' import TipPopup from './tip-popup'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { import {
@ -132,53 +131,54 @@ const ZoomInOut: FC = () => {
> >
<PortalToFollowElemTrigger asChild onClick={handleTrigger}> <PortalToFollowElemTrigger asChild onClick={handleTrigger}>
<div className={` <div className={`
p-0.5 h-9 cursor-pointer text-[13px] text-gray-500 font-medium rounded-lg bg-white shadow-lg border-[0.5px] border-gray-100 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
hover:bg-state-base-hover
${workflowReadOnly && '!cursor-not-allowed opacity-50'} ${workflowReadOnly && '!cursor-not-allowed opacity-50'}
`}> `}>
<div className={cn( <div className={cn(
'flex items-center justify-between w-[98px] h-8 hover:bg-gray-50 rounded-lg', 'flex items-center justify-between w-[98px] h-8 rounded-lg',
open && 'bg-gray-50',
)}> )}>
<TipPopup <TipPopup
title={t('workflow.operator.zoomOut')} title={t('workflow.operator.zoomOut')}
shortcuts={['ctrl', '-']} shortcuts={['ctrl', '-']}
> >
<div <div
className='flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer hover:bg-black/5' className='flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
zoomOut() zoomOut()
}} }}
> >
<RiZoomOutLine className='w-4 h-4' /> <RiZoomOutLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
</div> </div>
</TipPopup> </TipPopup>
<div className='w-[34px]'>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div> <div className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
<TipPopup <TipPopup
title={t('workflow.operator.zoomIn')} title={t('workflow.operator.zoomIn')}
shortcuts={['ctrl', '+']} shortcuts={['ctrl', '+']}
> >
<div <div
className='flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer hover:bg-black/5' className='flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
zoomIn() zoomIn()
}} }}
> >
<RiZoomInLine className='w-4 h-4' /> <RiZoomInLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
</div> </div>
</TipPopup> </TipPopup>
</div> </div>
</div> </div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'> <PortalToFollowElemContent className='z-10'>
<div className='w-[145px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg'> <div className='w-[145px] backdrop-blur-[5px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
{ {
ZOOM_IN_OUT_OPTIONS.map((options, i) => ( ZOOM_IN_OUT_OPTIONS.map((options, i) => (
<Fragment key={i}> <Fragment key={i}>
{ {
i !== 0 && ( i !== 0 && (
<div className='h-[1px] bg-gray-100' /> <Divider className='m-0' />
) )
} }
<div className='p-1'> <div className='p-1'>
@ -186,25 +186,27 @@ const ZoomInOut: FC = () => {
options.map(option => ( options.map(option => (
<div <div
key={option.key} key={option.key}
className='flex items-center justify-between px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer text-sm text-gray-700' 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'
onClick={() => handleZoom(option.key)} onClick={() => handleZoom(option.key)}
> >
{option.text} <span>{option.text}</span>
{ <div className='flex items-center space-x-0.5'>
option.key === ZoomType.zoomToFit && ( {
<ShortcutsName keys={[`${getKeyboardKeyNameBySystem('ctrl')}`, '1']} /> option.key === ZoomType.zoomToFit && (
) <ShortcutsName keys={['ctrl', '1']} />
} )
{ }
option.key === ZoomType.zoomTo50 && ( {
<ShortcutsName keys={['shift', '5']} /> option.key === ZoomType.zoomTo50 && (
) <ShortcutsName keys={['shift', '5']} />
} )
{ }
option.key === ZoomType.zoomTo100 && ( {
<ShortcutsName keys={['shift', '1']} /> option.key === ZoomType.zoomTo100 && (
) <ShortcutsName keys={['shift', '1']} />
} )
}
</div>
</div> </div>
)) ))
} }

21
web/app/components/workflow/panel-contextmenu.tsx
View File

@ -5,6 +5,7 @@ import {
} from 'react' } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useClickAway } from 'ahooks' import { useClickAway } from 'ahooks'
import Divider from '../base/divider'
import ShortcutsName from './shortcuts-name' import ShortcutsName from './shortcuts-name'
import { useStore } from './store' import { useStore } from './store'
import { import {
@ -41,7 +42,7 @@ const PanelContextmenu = () => {
const renderTrigger = () => { const renderTrigger = () => {
return ( return (
<div <div
className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
> >
{t('workflow.common.addBlock')} {t('workflow.common.addBlock')}
</div> </div>
@ -53,7 +54,7 @@ const PanelContextmenu = () => {
return ( return (
<div <div
className='absolute w-[200px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xl z-[9]' className='absolute w-[200px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg z-[9]'
style={{ style={{
left: panelMenu.left, left: panelMenu.left,
top: panelMenu.top, top: panelMenu.top,
@ -69,7 +70,7 @@ const PanelContextmenu = () => {
}} }}
/> />
<div <div
className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
handleAddNote() handleAddNote()
@ -79,7 +80,7 @@ const PanelContextmenu = () => {
{t('workflow.nodes.note.addNote')} {t('workflow.nodes.note.addNote')}
</div> </div>
<div <div
className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={() => { onClick={() => {
handleStartWorkflowRun() handleStartWorkflowRun()
handlePaneContextmenuCancel() handlePaneContextmenuCancel()
@ -89,12 +90,12 @@ const PanelContextmenu = () => {
<ShortcutsName keys={['alt', 'r']} /> <ShortcutsName keys={['alt', 'r']} />
</div> </div>
</div> </div>
<div className='h-[1px] bg-gray-100'></div> <Divider className='m-0' />
<div className='p-1'> <div className='p-1'>
<div <div
className={cn( className={cn(
'flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer', 'flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer',
!clipboardElements.length ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50', !clipboardElements.length ? 'opacity-50 cursor-not-allowed' : 'hover:bg-state-base-hover',
)} )}
onClick={() => { onClick={() => {
if (clipboardElements.length) { if (clipboardElements.length) {
@ -107,16 +108,16 @@ const PanelContextmenu = () => {
<ShortcutsName keys={['ctrl', 'v']} /> <ShortcutsName keys={['ctrl', 'v']} />
</div> </div>
</div> </div>
<div className='h-[1px] bg-gray-100'></div> <Divider className='m-0' />
<div className='p-1'> <div className='p-1'>
<div <div
className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={() => exportCheck()} onClick={() => exportCheck()}
> >
{t('app.export')} {t('app.export')}
</div> </div>
<div <div
className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' className='flex items-center justify-between px-3 h-8 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={() => setShowImportDSLModal(true)} onClick={() => setShowImportDSLModal(true)}
> >
{t('workflow.common.importDSL')} {t('workflow.common.importDSL')}

4
web/app/components/workflow/shortcuts-name.tsx
View File

@ -12,14 +12,14 @@ const ShortcutsName = ({
}: ShortcutsNameProps) => { }: ShortcutsNameProps) => {
return ( return (
<div className={cn( <div className={cn(
'flex items-center gap-0.5 h-4 text-xs text-gray-400', 'flex items-center gap-0.5',
className, className,
)}> )}>
{ {
keys.map(key => ( keys.map(key => (
<div <div
key={key} key={key}
className='capitalize' className='w-4 h-4 flex items-center justify-center bg-components-kbd-bg-gray rounded-[4px] system-kbd capitalize'
> >
{getKeyboardKeyNameBySystem(key)} {getKeyboardKeyNameBySystem(key)}
</div> </div>

4
web/app/components/workflow/style.css
View File

@ -19,4 +19,6 @@
#workflow-container .react-flow__node-custom-note { #workflow-container .react-flow__node-custom-note {
z-index: -1000 !important; z-index: -1000 !important;
} }
#workflow-container .react-flow {}

1
web/app/components/workflow/utils.ts
View File

@ -549,6 +549,7 @@ export const isMac = () => {
const specialKeysNameMap: Record<string, string | undefined> = { const specialKeysNameMap: Record<string, string | undefined> = {
ctrl: '⌘', ctrl: '⌘',
alt: '⌥', alt: '⌥',
shift: '⇧',
} }
export const getKeyboardKeyNameBySystem = (key: string) => { export const getKeyboardKeyNameBySystem = (key: string) => {

2
web/app/layout.tsx
View File

@ -34,7 +34,7 @@ const LocaleLayout = ({
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />
</head> </head>
<body <body
className="h-full select-auto" className="h-full select-auto color-scheme"
data-api-prefix={process.env.NEXT_PUBLIC_API_PREFIX} data-api-prefix={process.env.NEXT_PUBLIC_API_PREFIX}
data-pubic-api-prefix={process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX} data-pubic-api-prefix={process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX}
data-public-edition={process.env.NEXT_PUBLIC_EDITION} data-public-edition={process.env.NEXT_PUBLIC_EDITION}

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

@ -7,6 +7,14 @@
@import "../../themes/manual-light.css"; @import "../../themes/manual-light.css";
@import "../../themes/manual-dark.css"; @import "../../themes/manual-dark.css";
html {
color-scheme: light;
}
html[data-theme='dark'] {
color-scheme: dark;
}
html[data-changing-theme] * { html[data-changing-theme] * {
transition: none !important; transition: none !important;
} }

1
web/tailwind.config.js
View File

@ -93,6 +93,7 @@ module.exports = {
'chatbot-bg': 'var(--color-chatbot-bg)', 'chatbot-bg': 'var(--color-chatbot-bg)',
'chat-bubble-bg': 'var(--color-chat-bubble-bg)', 'chat-bubble-bg': 'var(--color-chat-bubble-bg)',
'workflow-process-bg': 'var(--color-workflow-process-bg)', 'workflow-process-bg': 'var(--color-workflow-process-bg)',
'mask-top2bottom-gray-50-to-transparent': 'var(--mask-top2bottom-gray-50-to-transparent)',
}, },
}, },
}, },

1
web/themes/manual-dark.css
View File

@ -2,4 +2,5 @@ html[data-theme="dark"] {
--color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%); --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%); --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%);
--color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%); --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
--mask-top2bottom-gray-50-to-transparent:linear-gradient(180deg, rgba(24, 24, 27, 0.08) 0%, rgba(0, 0, 0, 0.00) 100%);
} }

1
web/themes/manual-light.css
View File

@ -2,4 +2,5 @@ html[data-theme="light"] {
--color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%); --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%); --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%);
--color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%); --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg, rgba(200, 206, 218, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%);
} }