瀏覽代碼

Fix: Update the background color and hover effect of secondary buttons (#23186)

tags/1.7.2
GuanMu 3 月之前
父節點
當前提交
98aea05ad2
No account linked to committer's email address

+ 10
- 1
web/app/components/workflow-app/components/workflow-header/features-trigger.tsx 查看文件

@@ -27,9 +27,12 @@ import { useInvalidateAppWorkflow, usePublishWorkflow, useResetWorkflowVersionHi
import type { PublishWorkflowParams } from '@/types/workflow'
import { fetchAppDetail } from '@/service/apps'
import { useStore as useAppStore } from '@/app/components/app/store'
import useTheme from '@/hooks/use-theme'
import cn from '@/utils/classnames'

const FeaturesTrigger = () => {
const { t } = useTranslation()
const { theme } = useTheme()
const workflowStore = useWorkflowStore()
const appDetail = useAppStore(s => s.appDetail)
const appID = appDetail?.id
@@ -121,7 +124,13 @@ const FeaturesTrigger = () => {

return (
<>
<Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
<Button
className={cn(
'text-components-button-secondary-text',
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
onClick={handleShowFeatures}
>
<RiApps2AddLine className='mr-1 h-4 w-4 text-components-button-secondary-text' />
{t('workflow.common.features')}
</Button>

+ 11
- 1
web/app/components/workflow/header/chat-variable-button.tsx 查看文件

@@ -2,8 +2,11 @@ import { memo } from 'react'
import Button from '@/app/components/base/button'
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
import { useStore } from '@/app/components/workflow/store'
import useTheme from '@/hooks/use-theme'
import cn from '@/utils/classnames'

const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
const { theme } = useTheme()
const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
@@ -15,7 +18,14 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
}

return (
<Button className='p-2' disabled={disabled} onClick={handleClick}>
<Button
className={cn(
'p-2',
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
disabled={disabled}
onClick={handleClick}
>
<BubbleX className='h-4 w-4 text-components-button-secondary-text' />
</Button>
)

+ 11
- 1
web/app/components/workflow/header/env-button.tsx 查看文件

@@ -2,8 +2,11 @@ import { memo } from 'react'
import Button from '@/app/components/base/button'
import { Env } from '@/app/components/base/icons/src/vender/line/others'
import { useStore } from '@/app/components/workflow/store'
import useTheme from '@/hooks/use-theme'
import cn from '@/utils/classnames'

const EnvButton = ({ disabled }: { disabled: boolean }) => {
const { theme } = useTheme()
const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
@@ -15,7 +18,14 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
}

return (
<Button className='p-2' disabled={disabled} onClick={handleClick}>
<Button
className={cn(
'p-2',
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
disabled={disabled}
onClick={handleClick}
>
<Env className='h-4 w-4 text-components-button-secondary-text' />
</Button>
)

+ 24
- 15
web/app/components/workflow/header/header-in-restoring.tsx 查看文件

@@ -19,6 +19,8 @@ import RestoringTitle from './restoring-title'
import Button from '@/app/components/base/button'
import { useStore as useAppStore } from '@/app/components/app/store'
import { useInvalidAllLastRun } from '@/service/use-workflow'
import useTheme from '@/hooks/use-theme'
import cn from '@/utils/classnames'

export type HeaderInRestoringProps = {
onRestoreSettled?: () => void
@@ -27,6 +29,7 @@ const HeaderInRestoring = ({
onRestoreSettled,
}: HeaderInRestoringProps) => {
const { t } = useTranslation()
const { theme } = useTheme()
const workflowStore = useWorkflowStore()
const appDetail = useAppStore.getState().appDetail

@@ -78,21 +81,27 @@ const HeaderInRestoring = ({
<div>
<RestoringTitle />
</div>
<div className='flex items-center justify-end gap-x-2'>
<Button
onClick={handleRestore}
disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
variant='primary'
>
{t('workflow.common.restore')}
</Button>
<Button
className='text-components-button-secondary-accent-text'
onClick={handleCancelRestore}
>
<div className='flex items-center gap-x-0.5'>
<RiHistoryLine className='h-4 w-4' />
<span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
<div className=' flex items-center justify-end gap-x-2'>
<Button
onClick={handleRestore}
disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
variant='primary'
className={cn(
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
>
{t('workflow.common.restore')}
</Button>
<Button
onClick={handleCancelRestore}
className={cn(
'text-components-button-secondary-accent-text',
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
>
<div className='flex items-center gap-x-0.5'>
<RiHistoryLine className='h-4 w-4' />
<span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
</div>
</Button>
</div>

+ 18
- 11
web/app/components/workflow/header/run-and-history.tsx 查看文件

@@ -21,6 +21,7 @@ import {
} from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
import useTheme from '@/hooks/use-theme'

const RunMode = memo(() => {
const { t } = useTranslation()
@@ -102,21 +103,27 @@ const PreviewMode = memo(() => {
PreviewMode.displayName = 'PreviewMode'

const RunAndHistory: FC = () => {
const { theme } = useTheme()
const isChatMode = useIsChatMode()
const { nodesReadOnly } = useNodesReadOnly()

return (
<div className='flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs'>
{
!isChatMode && <RunMode />
}
{
isChatMode && <PreviewMode />
}
<div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
<ViewHistory />
<Checklist disabled={nodesReadOnly} />
</div>
<>
<div className={cn(
'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs',
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}>
{
!isChatMode && <RunMode />
}
{
isChatMode && <PreviewMode />
}
<div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
<ViewHistory />
<Checklist disabled={nodesReadOnly} />
</div>
</>
)
}


+ 13
- 7
web/app/components/workflow/header/version-history-button.tsx 查看文件

@@ -5,6 +5,8 @@ import { useKeyPress } from 'ahooks'
import Button from '../../base/button'
import Tooltip from '../../base/tooltip'
import { getKeyboardKeyCodeBySystem } from '../utils'
import useTheme from '@/hooks/use-theme'
import cn from '@/utils/classnames'

type VersionHistoryButtonProps = {
onClick: () => Promise<unknown> | unknown
@@ -38,6 +40,7 @@ PopupContent.displayName = 'PopupContent'
const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
onClick,
}) => {
const { theme } = useTheme()
const handleViewVersionHistory = useCallback(async () => {
await onClick?.()
}, [onClick])
@@ -46,7 +49,7 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
e.preventDefault()
handleViewVersionHistory()
},
{ exactMatch: true, useCapture: true })
{ exactMatch: true, useCapture: true })

return <Tooltip
popupContent={<PopupContent />}
@@ -54,12 +57,15 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
popupClassName='rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg
shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px] p-1.5'
>
<Button
className={'p-2'}
onClick={handleViewVersionHistory}
>
<RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' />
</Button>
<Button
className={cn(
'p-2',
theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
)}
onClick={handleViewVersionHistory}
>
<RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' />
</Button>
</Tooltip>
}


+ 2
- 2
web/themes/manual-dark.css 查看文件

@@ -53,8 +53,8 @@ html[data-theme="dark"] {
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
--color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
rgba(24, 24, 27, 0.08) 0%,
rgba(0, 0, 0, 0) 100%);
rgba(29, 29, 32, 0.9) 0%,
rgba(29, 29, 32, 0.08) 100%);
--color-line-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%);
--color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 100%);
--color-premium-yearly-tip-text-background: linear-gradient(91deg, #FDB022 2.18%, #F79009 108.79%);

+ 2
- 2
web/themes/manual-light.css 查看文件

@@ -53,8 +53,8 @@ html[data-theme="light"] {
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
--color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
rgba(200, 206, 218, 0.2) 0%,
rgba(255, 255, 255, 0) 100%);
rgba(242, 244, 247, 0.9) 0%,
rgba(242, 244, 247, 0.05) 100%);
--color-line-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
--color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
--color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%);

Loading…
取消
儲存