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

feat: search input to new

Browse Source
This commit is contained in:
Joel 2025-05-09 16:45:44 +08:00
parent d3d8822b6f
commit 1d99895304
1 changed files with 41 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
web/app/components/plugins/marketplace/search-box/index.tsx
View File

@ -1,5 +1,5 @@
'use client' 'use client'
import { RiCloseLine } from '@remixicon/react' import { RiCloseLine, RiSearchLine } from '@remixicon/react'
import TagsFilter from './tags-filter' import TagsFilter from './tags-filter'
import ActionButton from '@/app/components/base/action-button' import ActionButton from '@/app/components/base/action-button'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
@ -32,48 +32,51 @@ const SearchBox = ({
}: SearchBoxProps) => { }: SearchBoxProps) => {
return ( return (
<div <div
className={cn( className='z-[11] flex items-center'
'z-[11] flex items-center',
size === 'large' && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
size === 'small' && 'rounded-lg bg-components-input-bg-normal p-0.5',
inputClassName,
)}
> >
<div className='relative flex grow items-center p-1 pl-2'> <div className={
<div className='mr-2 flex w-full items-center'> cn('flex grow items-center',
<input size === 'large' && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
className={cn( size === 'small' && 'rounded-lg bg-components-input-bg-normal p-0.5',
'body-md-medium block grow appearance-none bg-transparent text-text-secondary outline-none', inputClassName,
)} )
value={search} }>
onChange={(e) => { <div className='relative flex grow items-center p-1 pl-2'>
onSearchChange(e.target.value) <div className='mr-2 flex w-full items-center'>
}} <RiSearchLine className='mr-1.5 size-4 text-text-placeholder' />
placeholder={placeholder} <input
/> className={cn(
{ 'body-md-medium block grow appearance-none bg-transparent text-text-secondary outline-none',
search && ( )}
<div className='absolute right-2 top-1/2 -translate-y-1/2'> value={search}
<ActionButton onClick={() => onSearchChange('')}> onChange={(e) => {
<RiCloseLine className='h-4 w-4' /> onSearchChange(e.target.value)
</ActionButton> }}
</div> placeholder={placeholder}
) />
} {
search && (
<div className='absolute right-2 top-1/2 -translate-y-1/2'>
<ActionButton onClick={() => onSearchChange('')}>
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
)
}
</div>
</div> </div>
<div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
<TagsFilter
tags={tags}
onTagsChange={onTagsChange}
size={size}
locale={locale}
/>
</div> </div>
<div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
<TagsFilter
tags={tags}
onTagsChange={onTagsChange}
size={size}
locale={locale}
/>
{supportAddCustomTool && ( {supportAddCustomTool && (
<div className='flex items-center'> <div className='flex shrink-0 items-center'>
<div className='mr-1.5 h-3.5 w-px bg-divider-regular'></div>
<ActionButton <ActionButton
className='bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text' className='ml-2 rounded-full bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text'
onClick={onShowAddCustomCollectionModal} onClick={onShowAddCustomCollectionModal}
> >
<RiAddLine className='h-4 w-4' /> <RiAddLine className='h-4 w-4' />