fix scrollbar (#5862)

This commit is contained in:
heheer
2025-11-05 13:19:11 +08:00
committed by GitHub
parent 5163e704ed
commit c9edba3539
6 changed files with 60 additions and 36 deletions

View File

@@ -52,7 +52,37 @@ const ToolTagFilterBox = ({
}, [size]);
return (
<Flex alignItems={'center'} userSelect={'none'}>
<Flex
alignItems={'center'}
userSelect={'none'}
overflow={'auto'}
pb={1}
css={{
'&:hover': {
overflow: 'auto',
'&::-webkit-scrollbar-thumb': {
background: 'rgba(0, 0, 0, 0.2)',
borderRadius: '3px',
visibility: 'visible'
}
},
'&::-webkit-scrollbar': {
marginTop: '2px',
height: '4px'
},
'&::-webkit-scrollbar-track': {
background: 'transparent'
},
'&::-webkit-scrollbar-thumb': {
background: 'rgba(0, 0, 0, 0)',
borderRadius: '3px',
visibility: 'hidden'
},
'&::-webkit-scrollbar-thumb:hover': {
background: 'rgba(0, 0, 0, 0.3)'
}
}}
>
<Box
{...tagBaseStyles}
rounded={'sm'}
@@ -62,31 +92,24 @@ const ToolTagFilterBox = ({
{t('common:All')}
</Box>
<Box mx={2} h={'20px'} w={'1px'} bg={'myGray.200'} />
<Flex
gap={2}
flex={1}
overflowX="auto"
flexWrap="nowrap"
css={{
scrollbarWidth: 'none',
msOverflowStyle: 'none'
}}
>
{tags.map((tag) => {
const isSelected = selectedTagIds.includes(tag.tagId);
return (
<Box
key={tag.tagId}
{...tagBaseStyles}
rounded={'full'}
bg={isSelected ? 'myGray.150 !important' : 'transparent'}
onClick={() => toggleTag(tag.tagId)}
>
{t(parseI18nString(tag.tagName, i18n.language))}
</Box>
);
})}
</Flex>
<Box flex={1}>
<Flex gap={2} flexWrap="nowrap">
{tags.map((tag) => {
const isSelected = selectedTagIds.includes(tag.tagId);
return (
<Box
key={tag.tagId}
{...tagBaseStyles}
rounded={'full'}
bg={isSelected ? 'myGray.150 !important' : 'transparent'}
onClick={() => toggleTag(tag.tagId)}
>
{t(parseI18nString(tag.tagName, i18n.language))}
</Box>
);
})}
</Flex>
</Box>
</Flex>
);
};

View File

@@ -201,11 +201,11 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
)}
{/* route components */}
{!searchKey && parentId && (
<Flex mt={2} px={[3, 6]}>
<Flex mt={1} px={[3, 6]}>
<FolderPath paths={paths} FirstPathDom={null} onClick={onUpdateParentId} />
</Flex>
)}
<MyBox isLoading={isLoading} mt={2} pb={3} flex={'1 0 0'} h={0}>
<MyBox isLoading={isLoading} mt={1} pb={3} flex={'1 0 0'} h={0}>
<Box overflow={'overlay'} height={'100%'}>
<RenderList
templates={templates}

View File

@@ -178,7 +178,7 @@ const NodeTemplateListHeader = ({
{templateType === TemplateTypeEnum.appTool &&
selectedTagIds !== undefined &&
setSelectedTagIds && (
<Box mt={2}>
<Box mt={2} mb={-1}>
<ToolTagFilterBox
tags={toolTags}
selectedTagIds={selectedTagIds}

View File

@@ -134,7 +134,7 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
</Box>
{/* Tag filter */}
{allTags.length > 0 && (
<Box mt={3} px={[3, 6]}>
<Box mt={3} mb={-1} px={[3, 6]}>
<ToolTagFilterBox
size="sm"
tags={allTags}

View File

@@ -400,7 +400,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => {
transition={'opacity 0.15s ease-out'}
pointerEvents={showCompactSearch ? 'auto' : 'none'}
>
<Flex mt={2} pt={4} alignItems={'center'}>
<Flex mt={2} pt={4} alignItems={'start'}>
<Flex
alignItems={'center'}
transition={'all 0.3s'}
@@ -454,7 +454,8 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => {
cursor={'pointer'}
borderRadius={'10px'}
_hover={{ borderColor: 'primary.600' }}
p={2}
px={2}
h={'35px'}
border={'1px solid'}
borderColor={'myGray.200'}
onClick={() => setIsSearchExpanded(true)}
@@ -466,7 +467,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => {
</Flex>
)}
</Flex>
<Box overflow={'auto'} mr={6}>
<Box overflow={'auto'} mr={6} mb={-1}>
<ToolTagFilterBox
tags={allTags}
selectedTagIds={tagIds}
@@ -551,7 +552,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => {
pointerEvents={showCompactSearch ? 'none' : 'auto'}
userSelect={'none'}
>
<Box flex={'1'} overflow={'auto'}>
<Box flex={'1'} overflow={'auto'} mb={-1}>
<ToolTagFilterBox
tags={allTags}
selectedTagIds={tagIds}

View File

@@ -190,7 +190,7 @@ const ToolKitProvider = () => {
)}
</Flex>
{/* Tags */}
<Flex mt={2} mb={4} alignItems={'center'}>
<Flex mt={2} mb={3} alignItems={'start'}>
<Flex alignItems={'center'}>
<Flex
alignItems={'center'}
@@ -263,7 +263,7 @@ const ToolKitProvider = () => {
)}
</Flex>
</Flex>
<Box flex={'1'} overflow={'auto'}>
<Box flex={'1'} overflow={'auto'} mb={-1}>
<ToolTagFilterBox
tags={tags}
selectedTagIds={selectedTagIds}