AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 04:25:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat/prompt editor dark theme (#12976)

Browse Source
This commit is contained in:
zxhlyh 2025-01-23 16:20:00 +08:00 committed by GitHub
parent 6024d8a42d
commit e54ce479ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/prompt-editor/index.tsx
View File

@ -149,7 +149,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
<LexicalComposer initialConfig={{ ...initialConfig, editable }}> <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
<div className='relative min-h-5'> <div className='relative min-h-5'>
<RichTextPlugin <RichTextPlugin
contentEditable={<ContentEditable className={`${className} outline-none ${compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm'} text-gray-700`} style={style || {}} />} contentEditable={<ContentEditable className={`${className} outline-none ${compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm'} text-text-secondary`} style={style || {}} />}
placeholder={<Placeholder value={placeholder} className={cn('truncate', placeholderClassName)} compact={compact} />} placeholder={<Placeholder value={placeholder} className={cn('truncate', placeholderClassName)} compact={compact} />}
ErrorBoundary={LexicalErrorBoundary} ErrorBoundary={LexicalErrorBoundary}
/> />

10
web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
View File

@ -133,7 +133,7 @@ export const useVariableOptions = (
return ( return (
<VariableMenuItem <VariableMenuItem
title={item.value} title={item.value}
icon={<BracketsX className='w-[14px] h-[14px] text-[#2970FF]' />} icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
queryString={queryString} queryString={queryString}
isSelected={isSelected} isSelected={isSelected}
onClick={onSelect} onClick={onSelect}
@ -162,7 +162,7 @@ export const useVariableOptions = (
return ( return (
<VariableMenuItem <VariableMenuItem
title={t('common.promptEditor.variable.modal.add')} title={t('common.promptEditor.variable.modal.add')}
icon={<BracketsX className='mr-2 w-[14px] h-[14px] text-[#2970FF]' />} icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
queryString={queryString} queryString={queryString}
isSelected={isSelected} isSelected={isSelected}
onClick={onSelect} onClick={onSelect}
@ -211,7 +211,7 @@ export const useExternalToolOptions = (
background={item.icon_background} background={item.icon_background}
/> />
} }
extraElement={<div className='text-xs text-gray-400'>{item.variableName}</div>} extraElement={<div className='text-xs text-text-tertiary'>{item.variableName}</div>}
queryString={queryString} queryString={queryString}
isSelected={isSelected} isSelected={isSelected}
onClick={onSelect} onClick={onSelect}
@ -240,8 +240,8 @@ export const useExternalToolOptions = (
return ( return (
<VariableMenuItem <VariableMenuItem
title={t('common.promptEditor.variable.modal.addTool')} title={t('common.promptEditor.variable.modal.addTool')}
icon={<Tool03 className='mr-2 w-[14px] h-[14px] text-[#444CE7]' />} icon={<Tool03 className='w-[14px] h-[14px] text-text-accent' />}
extraElement={< ArrowUpRight className='w-3 h-3 text-gray-400' />} extraElement={< ArrowUpRight className='w-3 h-3 text-text-tertiary' />}
queryString={queryString} queryString={queryString}
isSelected={isSelected} isSelected={isSelected}
onClick={onSelect} onClick={onSelect}

6
web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
View File

@ -135,7 +135,7 @@ const ComponentPicker = ({
// See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493 // See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
<div className='w-0 h-0'> <div className='w-0 h-0'>
<div <div
className='p-1 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg' className='p-1 w-[260px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'
style={{ style={{
...floatingStyles, ...floatingStyles,
visibility: isPositioned ? 'visible' : 'hidden', visibility: isPositioned ? 'visible' : 'hidden',
@ -148,7 +148,7 @@ const ComponentPicker = ({
{ {
// Divider // Divider
index !== 0 && options.at(index - 1)?.group !== option.group && ( index !== 0 && options.at(index - 1)?.group !== option.group && (
<div className='h-px bg-gray-100 my-1 w-full -translate-x-1'></div> <div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
) )
} }
{option.renderMenuOption({ {option.renderMenuOption({
@ -169,7 +169,7 @@ const ComponentPicker = ({
<> <>
{ {
(!!options.length) && ( (!!options.length) && (
<div className='h-px bg-gray-100 my-1 w-full -translate-x-1'></div> <div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
) )
} }
<div className='p-1'> <div className='p-1'>

8
web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
View File

@ -21,9 +21,9 @@ export const PromptMenuItem = memo(({
return ( return (
<div <div
className={` className={`
flex items-center px-3 h-6 cursor-pointer hover:bg-gray-50 rounded-md flex items-center px-3 h-6 cursor-pointer hover:bg-state-base-hover rounded-md
${isSelected && !disabled && '!bg-gray-50'} ${isSelected && !disabled && '!bg-state-base-hover'}
${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-gray-50 cursor-pointer'} ${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-state-base-hover cursor-pointer'}
`} `}
tabIndex={-1} tabIndex={-1}
ref={setRefElement} ref={setRefElement}
@ -38,7 +38,7 @@ export const PromptMenuItem = memo(({
onClick() onClick()
}}> }}>
{icon} {icon}
<div className='ml-1 text-[13px] text-gray-900'>{title}</div> <div className='ml-1 text-[13px] text-text-secondary'>{title}</div>
</div> </div>
) )
}) })

8
web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx
View File

@ -38,8 +38,8 @@ export const VariableMenuItem = memo(({
return ( return (
<div <div
className={` className={`
flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer flex items-center px-3 h-6 rounded-md hover:bg-state-base-hover cursor-pointer
${isSelected && 'bg-primary-50'} ${isSelected && 'bg-state-base-hover'}
`} `}
tabIndex={-1} tabIndex={-1}
ref={setRefElement} ref={setRefElement}
@ -48,9 +48,9 @@ export const VariableMenuItem = memo(({
<div className='mr-2'> <div className='mr-2'>
{icon} {icon}
</div> </div>
<div className='grow text-[13px] text-gray-900 truncate' title={title}> <div className='grow text-[13px] text-text-secondary truncate' title={title}>
{before} {before}
<span className='text-[#2970FF]'>{middle}</span> <span className='text-text-accent'>{middle}</span>
{after} {after}
</div> </div>
{extraElement} {extraElement}

2
web/app/components/base/prompt-editor/plugins/placeholder.tsx
View File

@ -16,7 +16,7 @@ const Placeholder = ({
return ( return (
<div className={cn( <div className={cn(
className, className,
'absolute top-0 left-0 h-full w-full text-sm text-gray-300 select-none pointer-events-none', 'absolute top-0 left-0 h-full w-full text-sm text-components-input-text-placeholder select-none pointer-events-none',
compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm', compact ? 'leading-5 text-[13px]' : 'leading-6 text-sm',
)}> )}>
{value || t('common.promptEditor.placeholder')} {value || t('common.promptEditor.placeholder')}

2
web/app/components/base/prompt-editor/plugins/variable-value-block/node.tsx
View File

@ -24,7 +24,7 @@ export class VariableValueBlockNode extends TextNode {
createDOM(config: EditorConfig): HTMLElement { createDOM(config: EditorConfig): HTMLElement {
const element = super.createDOM(config) const element = super.createDOM(config)
element.classList.add('inline-flex', 'items-center', 'px-0.5', 'h-[22px]', 'text-[#155EEF]', 'rounded-[5px]', 'align-middle') element.classList.add('inline-flex', 'items-center', 'px-0.5', 'h-[22px]', 'text-text-accent', 'rounded-[5px]', 'align-middle')
return element return element
} }

21
web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
View File

@ -77,8 +77,8 @@ const WorkflowVariableBlockComponent = ({
<div <div
className={cn( className={cn(
'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none', 'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none',
isSelected ? ' border-[#84ADFF] bg-[#F5F8FF]' : ' border-black/5 bg-white', isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
!node && !isEnv && !isChatVar && '!border-[#F04438] !bg-[#FEF3F2]', !node && !isEnv && !isChatVar && '!border-state-destructive-solid !bg-state-destructive-hover',
)} )}
ref={ref} ref={ref}
> >
@ -88,25 +88,30 @@ const WorkflowVariableBlockComponent = ({
node?.type && ( node?.type && (
<div className='p-[1px]'> <div className='p-[1px]'>
<VarBlockIcon <VarBlockIcon
className='!text-gray-500' className='!text-text-secondary'
type={node?.type} type={node?.type}
/> />
</div> </div>
) )
} }
<div className='shrink-0 mx-0.5 max-w-[60px] text-xs font-medium text-gray-500 truncate' title={node?.title} style={{ <div className='shrink-0 mx-0.5 max-w-[60px] text-xs font-medium text-text-secondary truncate' title={node?.title} style={{
}}>{node?.title}</div> }}>{node?.title}</div>
<Line3 className='mr-0.5 text-gray-300'></Line3> <Line3 className='mr-0.5 text-divider-deep'></Line3>
</div> </div>
)} )}
<div className='flex items-center text-primary-600'> <div className='flex items-center text-text-accent'>
{!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5', isException && 'text-text-warning')} />} {!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5', isException && 'text-text-warning')} />}
{isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />} {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />} {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
<div className={cn('shrink-0 ml-0.5 text-xs font-medium truncate', (isEnv || isChatVar) && 'text-gray-900', isException && 'text-text-warning')} title={varName}>{varName}</div> <div className={cn(
'shrink-0 ml-0.5 text-xs font-medium truncate',
isEnv && 'text-util-colors-violet-violet-600',
isChatVar && 'text-util-colors-teal-teal-700',
isException && 'text-text-warning',
)} title={varName}>{varName}</div>
{ {
!node && !isEnv && !isChatVar && ( !node && !isEnv && !isChatVar && (
<RiErrorWarningFill className='ml-0.5 w-3 h-3 text-[#D92D20]' /> <RiErrorWarningFill className='ml-0.5 w-3 h-3 text-text-destructive' />
) )
} }
</div> </div>