Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions

View File

@@ -27,9 +27,9 @@ const SearchBox = ({
return (
<div
className={cn(
'flex items-center z-[11]',
size === 'large' && 'p-1.5 bg-components-panel-bg-blur rounded-xl shadow-md border border-components-chat-input-border',
size === 'small' && 'p-0.5 bg-components-input-bg-normal rounded-lg',
'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,
)}
>
@@ -39,12 +39,12 @@ const SearchBox = ({
size={size}
locale={locale}
/>
<div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='relative grow flex items-center p-1 pl-2'>
<div className='flex items-center mr-2 w-full'>
<div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
<div className='relative flex grow items-center p-1 pl-2'>
<div className='mr-2 flex w-full items-center'>
<input
className={cn(
'grow block outline-none appearance-none body-md-medium text-text-secondary bg-transparent',
'body-md-medium block grow appearance-none bg-transparent text-text-secondary outline-none',
)}
value={search}
onChange={(e) => {
@@ -56,7 +56,7 @@ const SearchBox = ({
search && (
<div className='absolute right-2 top-1/2 -translate-y-1/2'>
<ActionButton onClick={() => onSearchChange('')}>
<RiCloseLine className='w-4 h-4' />
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
)

View File

@@ -27,7 +27,7 @@ const SearchBoxWrapper = ({
return (
<SearchBox
inputClassName={cn(
'mx-auto w-[640px] shrink-0 z-[0]',
'z-[0] mx-auto w-[640px] shrink-0',
searchBoxCanAnimate && 'sticky top-3 z-[11]',
!intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
)}

View File

@@ -57,17 +57,17 @@ const TagsFilter = ({
onClick={() => setOpen(v => !v)}
>
<div className={cn(
'flex items-center text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
size === 'large' && 'px-2 py-1 h-8',
size === 'small' && 'pr-1.5 py-0.5 h-7 pl-1 ',
'flex cursor-pointer items-center rounded-lg text-text-tertiary hover:bg-state-base-hover',
size === 'large' && 'h-8 px-2 py-1',
size === 'small' && 'h-7 py-0.5 pl-1 pr-1.5 ',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
)}>
<div className='p-0.5'>
<RiFilter3Line className='w-4 h-4' />
<RiFilter3Line className='h-4 w-4' />
</div>
<div className={cn(
'flex items-center p-1 system-sm-medium',
'system-sm-medium flex items-center p-1',
size === 'large' && 'p-1',
size === 'small' && 'px-0.5 py-1',
)}>
@@ -79,7 +79,7 @@ const TagsFilter = ({
}
{
selectedTagsLength > 2 && (
<div className='ml-1 system-xs-medium text-text-tertiary'>
<div className='system-xs-medium ml-1 text-text-tertiary'>
+{selectedTagsLength - 2}
</div>
)
@@ -88,20 +88,20 @@ const TagsFilter = ({
{
!!selectedTagsLength && (
<RiCloseCircleFill
className='w-4 h-4 text-text-quaternary cursor-pointer'
className='h-4 w-4 cursor-pointer text-text-quaternary'
onClick={() => onTagsChange([])}
/>
)
}
{
!selectedTagsLength && (
<RiArrowDownSLine className='w-4 h-4' />
<RiArrowDownSLine className='h-4 w-4' />
)
}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
<div className='p-2 pb-1'>
<Input
showLeftIcon
@@ -110,19 +110,19 @@ const TagsFilter = ({
placeholder={t('pluginTags.searchTags') || ''}
/>
</div>
<div className='p-1 max-h-[448px] overflow-y-auto'>
<div className='max-h-[448px] overflow-y-auto p-1'>
{
filteredOptions.map(option => (
<div
key={option.name}
className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
onClick={() => handleCheck(option.name)}
>
<Checkbox
className='mr-1'
checked={tags.includes(option.name)}
/>
<div className='px-1 system-sm-medium text-text-secondary'>
<div className='system-sm-medium px-1 text-text-secondary'>
{option.label}
</div>
</div>