ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add dark mode to start node and add input filed modal

Browse Source
feat/workflow-node-dark-mode
twwu 1 year ago
parent d649037c3e
commit bb305e52bc
6 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File

16
web/app/components/app/configuration/base/icons/remove-icon/index.tsx
Unescape Escape View File

@ -1,29 +1,25 @@
'use client' 'use client'
import React, { useState } from 'react' import React from 'react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
type IRemoveIconProps = { type IRemoveIconProps = {
className?: string className?: string
isHoverStatus?: boolean
onClick: () => void onClick: () => void
} } & React.HTMLAttributes<HTMLDivElement>
const RemoveIcon = ({ const RemoveIcon = ({
className, className,
isHoverStatus,
onClick, onClick,
...props
}: IRemoveIconProps) => { }: IRemoveIconProps) => {
const [isHovered, setIsHovered] = useState(false)
const computedIsHovered = isHoverStatus || isHovered
return ( return (
<div <div
className={cn(className, computedIsHovered && 'bg-[#FEE4E2]', 'flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-[#FEE4E2]')} className={cn('flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive', className)}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onClick={onClick} onClick={onClick}
{...props}
> >
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6H14M6 8H18M16.6667 8L16.1991 15.0129C16.129 16.065 16.0939 16.5911 15.8667 16.99C15.6666 17.3412 15.3648 17.6235 15.0011 17.7998C14.588 18 14.0607 18 13.0062 18H10.9938C9.93927 18 9.41202 18 8.99889 17.7998C8.63517 17.6235 8.33339 17.3412 8.13332 16.99C7.90607 16.5911 7.871 16.065 7.80086 15.0129L7.33333 8M10.6667 11V14.3333M13.3333 11V14.3333" stroke={computedIsHovered ? '#D92D20' : '#667085'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M10 6H14M6 8H18M16.6667 8L16.1991 15.0129C16.129 16.065 16.0939 16.5911 15.8667 16.99C15.6666 17.3412 15.3648 17.6235 15.0011 17.7998C14.588 18 14.0607 18 13.0062 18H10.9938C9.93927 18 9.41202 18 8.99889 17.7998C8.63517 17.6235 8.33339 17.3412 8.13332 16.99C7.90607 16.5911 7.871 16.065 7.80086 15.0129L7.33333 8M10.6667 11V14.3333M13.3333 11V14.3333" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
</div> </div>
) )

43
web/app/components/app/configuration/config-var/config-select/index.tsx
Unescape Escape View File

@ -1,12 +1,13 @@
'use client' 'use client'
import type { FC } from 'react' import type { FC } from 'react'
import React from 'react' import React, { useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { PlusIcon } from '@heroicons/react/24/outline' import { PlusIcon } from '@heroicons/react/24/outline'
import { ReactSortable } from 'react-sortablejs' import { ReactSortable } from 'react-sortablejs'
import RemoveIcon from '../../base/icons/remove-icon' import RemoveIcon from '../../base/icons/remove-icon'
import s from './style.module.css' import s from './style.module.css'
import cn from '@/utils/classnames'
export type Options = string[] export type Options = string[]
export type IConfigSelectProps = { export type IConfigSelectProps = {
@ -19,6 +20,8 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
onChange, onChange,
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [delBtnHoverIndex, setDelBtnHoverIndex] = useState(-1)
const [focusedIndex, setFocusedIndex] = useState(-1)
const optionList = options.map((content, index) => { const optionList = options.map((content, index) => {
return ({ return ({
@ -36,14 +39,24 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
list={optionList} list={optionList}
setList={list => onChange(list.map(item => item.name))} setList={list => onChange(list.map(item => item.name))}
handle='.handle' handle='.handle'
ghostClass="opacity-50" ghostClass="opacity-30"
animation={150} animation={150}
> >
{options.map((o, index) => ( {options.map((o, index) => {
<div className={`${s.inputWrap} relative`} key={index}> const delBtnHover = delBtnHoverIndex === index
<div className='handle flex items-center justify-center w-4 h-4 cursor-grab'> const inputFocused = focusedIndex === index
return (
<div
className={cn(
`${s.inputWrap} relative border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg`,
inputFocused && 'border-components-input-border-active bg-components-input-bg-active',
delBtnHover && 'bg-state-destructive-hover',
)}
key={index}
>
<div className='handle flex items-center justify-center w-3.5 h-3.5 cursor-grab text-text-quaternary'>
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="#98A2B3" /> <path fillRule="evenodd" clipRule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="currentColor" />
</svg> </svg>
</div> </div>
<input <input
@ -59,25 +72,29 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
return item return item
})) }))
}} }}
className={'w-full pl-1.5 pr-8 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer'} onFocus={() => { setFocusedIndex(index) }}
onBlur={() => { setFocusedIndex(-1) }}
className={'w-full pl-1 pr-8 system-sm-medium text-text-secondary border-0 grow h-8 bg-transparent group focus:outline-none cursor-pointer caret-[#295EFF]'}
/> />
<RemoveIcon <RemoveIcon
className={`${s.deleteBtn} absolute top-1/2 translate-y-[-50%] right-1.5 items-center justify-center w-6 h-6 rounded-md cursor-pointer hover:bg-[#FEE4E2]`} className={`${s.deleteBtn} absolute top-1/2 translate-y-[-50%] right-1 items-center justify-center w-6 h-6 rounded-lg cursor-pointer`}
onClick={() => { onClick={() => {
onChange(options.filter((_, i) => index !== i)) onChange(options.filter((_, i) => index !== i))
}} }}
onMouseEnter={() => setDelBtnHoverIndex(index)}
onMouseLeave={() => setDelBtnHoverIndex(-1)}
/> />
</div> </div>)
))} })}
</ReactSortable> </ReactSortable>
</div> </div>
)} )}
<div <div
onClick={() => { onChange([...options, '']) }} onClick={() => { onChange([...options, '']) }}
className='flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400 bg-gray-100'> className='flex items-center h-8 px-2 gap-1 rounded-lg cursor-pointer bg-components-button-tertiary-bg'>
<PlusIcon width={16} height={16}></PlusIcon> <PlusIcon className='text-components-button-tertiary-text' width={16} height={16} />
<div className='text-gray-500 text-[13px]'>{t('appDebug.variableConfig.addOption')}</div> <div className='text-components-button-tertiary-text system-sm-medium'>{t('appDebug.variableConfig.addOption')}</div>
</div> </div>
</div> </div>
) )

1
web/app/components/app/configuration/config-var/config-select/style.module.css
Unescape Escape View File

@ -2,7 +2,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
border: 1px solid #EAECF0;
padding-left: 10px; padding-left: 10px;
cursor: pointer; cursor: pointer;
} }

4
web/app/components/app/configuration/config-var/select-type-item/index.tsx
Unescape Escape View File

@ -32,9 +32,9 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
onClick={onClick} onClick={onClick}
> >
<div className='shrink-0'> <div className='shrink-0'>
<InputVarTypeIcon type={type} className='w-5 h-5' /> <InputVarTypeIcon type={type} className='w-5 h-5 text-text-secondary' />
</div> </div>
<span>{typeName}</span> <span className='text-text-secondary'>{typeName}</span>
</div> </div>
) )
} }

3
web/app/components/workflow/block-icon.tsx
Unescape Escape View File

@ -82,7 +82,8 @@ const BlockIcon: FC<BlockIconProps> = ({
}) => { }) => {
return ( return (
<div className={` <div className={`
flex items-center justify-center border-[0.5px] border-white/2 text-white flex items-center justify-center border-[0.5px] border-divider-subtle
text-text-primary-on-surface shadow-md shadow-shadow-shadow-5
${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]} ${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]}
${ICON_CONTAINER_BG_COLOR_MAP[type]} ${ICON_CONTAINER_BG_COLOR_MAP[type]}
${toolIcon && '!shadow-none'} ${toolIcon && '!shadow-none'}

10
web/app/components/workflow/nodes/start/node.tsx
Unescape Escape View File

@ -20,15 +20,15 @@ const Node: FC<NodeProps<StartNodeType>> = ({
<div className='mb-1 px-3 py-1'> <div className='mb-1 px-3 py-1'>
<div className='space-y-0.5'> <div className='space-y-0.5'>
{variables.map(variable => ( {variables.map(variable => (
<div key={variable.variable} className='flex items-center h-6 justify-between bg-gray-100 rounded-md px-1 space-x-1 text-xs font-normal text-gray-700'> <div key={variable.variable} className='flex items-center h-6 justify-between bg-workflow-block-parma-bg rounded-md px-1 space-x-1'>
<div className='w-0 grow flex items-center space-x-1'> <div className='w-0 grow flex items-center space-x-1'>
<Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' /> <Variable02 className='shrink-0 w-3.5 h-3.5 text-text-accent' />
<span className='w-0 grow truncate text-xs font-normal text-gray-700'>{variable.variable}</span> <span className='w-0 grow truncate system-xs-regular text-text-secondary'>{variable.variable}</span>
</div> </div>
<div className='ml-1 flex items-center space-x-1'> <div className='ml-1 flex items-center space-x-1'>
{variable.required && <span className='text-xs font-normal text-gray-500 uppercase'>{t(`${i18nPrefix}.required`)}</span>} {variable.required && <span className='system-2xs-regular-uppercase text-text-tertiary'>{t(`${i18nPrefix}.required`)}</span>}
<InputVarTypeIcon type={variable.type} className='w-3 h-3 text-gray-500' /> <InputVarTypeIcon type={variable.type} className='w-3 h-3 text-text-tertiary' />
</div> </div>
</div> </div>
))} ))}

Write Preview
Loading…
Cancel
Save