mirror of
https://github.com/labring/FastGPT.git
synced 2025-11-28 01:04:42 +08:00
fix scrollbar (#5862)
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user