hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-15 22:06:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: workflow dark mode (#17785)

Browse Source
This commit is contained in:
KVOJJJin
2025-04-10 17:15:48 +08:00
committed by GitHub
parent 636a0ba37f
commit 17a26da1e6
75 changed files with 324 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/components/workflow/panel/chat-record/index.tsx
View File

@@ -86,12 +86,10 @@ const ChatRecord = () => {
return (
<div
className={`
flex h-full w-[420px] flex-col rounded-l-2xl border border-black/2 shadow-xl
`}
style={{
background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
}}
className='flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-chatbot-bg shadow-xl'
// style={{
// background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
// }}
>
{!fetched && (
<div className='flex h-full items-center justify-center'>
@@ -100,7 +98,7 @@ const ChatRecord = () => {
)}
{fetched && (
<>
<div className='flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
<div className='flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'>
{`TEST CHAT#${historyWorkflowData?.sequence_number}`}
<div
className='flex h-6 w-6 cursor-pointer items-center justify-center'
@@ -109,7 +107,7 @@ const ChatRecord = () => {
workflowStore.setState({ historyWorkflowData: undefined })
}}
>
<RiCloseLine className='h-4 w-4 text-gray-500' />
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
<div className='h-0 grow'>

8
web/app/components/workflow/panel/chat-record/user-input.tsx
View File

@@ -17,25 +17,25 @@ const UserInput = () => {
<div
className={`
rounded-xl border
${!expanded ? 'border-indigo-100 bg-indigo-25 shadow-none' : 'border-transparent bg-white shadow-xs'}
${!expanded ? 'border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-none' : 'border-transparent bg-white shadow-xs'}
`}
>
<div
className={`
flex h-[18px] cursor-pointer items-center px-2 pt-4 text-[13px] font-semibold
${!expanded ? 'text-indigo-800' : 'text-gray-800'}
${!expanded ? 'text-text-accent-secondary' : 'text-text-secondary'}
`}
onClick={() => setExpanded(!expanded)}
>
<RiArrowDownSLine
className={`mr-1 h-3 w-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
className={`mr-1 h-3 w-3 ${!expanded ? '-rotate-90 text-text-accent' : 'text-text-tertiary'}`}
/>
{t('workflow.panel.userInputField').toLocaleUpperCase()}
</div>
<div className='px-2 pb-3 pt-1'>
{
expanded && (
<div className='py-2 text-[13px] text-gray-900'>
<div className='py-2 text-[13px] text-text-primary'>
{
variables.map((variable: any) => (
<div

4
web/app/components/workflow/panel/debug-and-preview/index.tsx
View File

@@ -125,12 +125,12 @@ const DebugAndPreview = () => {
{expanded && <div className='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg'/>}
</div>
)}
<div className='mx-3 h-3.5 w-[1px] bg-gray-200'></div>
<div className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div>
<div
className='flex h-6 w-6 cursor-pointer items-center justify-center'
onClick={handleCancelDebugAndPreviewPanel}
>
<RiCloseLine className='h-4 w-4 text-gray-500' />
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>

24
web/app/components/workflow/panel/workflow-preview.tsx
View File

@@ -49,29 +49,29 @@ const WorkflowPreview = () => {
return (
<div className={`
flex h-full w-[420px] flex-col rounded-l-2xl border-[0.5px] border-gray-200 bg-white shadow-xl
flex h-full w-[420px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl
`}>
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'>
{`Test Run${!workflowRunningData?.result.sequence_number ? '' : `#${workflowRunningData?.result.sequence_number}`}`}
<div className='cursor-pointer p-1' onClick={() => handleCancelDebugAndPreviewPanel()}>
<RiCloseLine className='h-4 w-4 text-gray-500' />
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
<div className='relative flex grow flex-col'>
<div className='flex shrink-0 items-center border-b-[0.5px] border-[rgba(0,0,0,0.05)] px-4'>
<div className='flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4'>
{showInputsPanel && (
<div
className={cn(
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-gray-700',
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-text-secondary',
)}
onClick={() => switchTab('INPUT')}
>{t('runLog.input')}</div>
)}
<div
className={cn(
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-text-secondary',
!workflowRunningData && '!cursor-not-allowed opacity-30',
)}
onClick={() => {
@@ -82,8 +82,8 @@ const WorkflowPreview = () => {
>{t('runLog.result')}</div>
<div
className={cn(
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
!workflowRunningData && '!cursor-not-allowed opacity-30',
)}
onClick={() => {
@@ -94,8 +94,8 @@ const WorkflowPreview = () => {
>{t('runLog.detail')}</div>
<div
className={cn(
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-gray-400',
currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
!workflowRunningData && '!cursor-not-allowed opacity-30',
)}
onClick={() => {