Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit c9edba35 by heheer Committed by GitHub
Options

fix scrollbar (#5862)

parent 5163e704
Showing with 45 additions and 21 deletions
packages/web/components/core/plugin/tool/TagFilterBox.tsx
...@@ -52,7 +52,37 @@ const ToolTagFilterBox = ({ ...@@ -52,7 +52,37 @@ const ToolTagFilterBox = ({
}, [size]); }, [size]);
return ( 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 <Box
{...tagBaseStyles} {...tagBaseStyles}
rounded={'sm'} rounded={'sm'}
...@@ -62,16 +92,8 @@ const ToolTagFilterBox = ({ ...@@ -62,16 +92,8 @@ const ToolTagFilterBox = ({
{t('common:All')} {t('common:All')}
</Box> </Box>
<Box mx={2} h={'20px'} w={'1px'} bg={'myGray.200'} /> <Box mx={2} h={'20px'} w={'1px'} bg={'myGray.200'} />
<Flex <Box flex={1}>
gap={2} <Flex gap={2} flexWrap="nowrap">
flex={1}
overflowX="auto"
flexWrap="nowrap"
css={{
scrollbarWidth: 'none',
msOverflowStyle: 'none'
}}
>
{tags.map((tag) => { {tags.map((tag) => {
const isSelected = selectedTagIds.includes(tag.tagId); const isSelected = selectedTagIds.includes(tag.tagId);
return ( return (
...@@ -87,6 +109,7 @@ const ToolTagFilterBox = ({ ...@@ -87,6 +109,7 @@ const ToolTagFilterBox = ({
); );
})} })}
</Flex> </Flex>
</Box>
</Flex> </Flex>
); );
}; };
......
projects/app/src/pageComponents/app/detail/SimpleApp/components/ToolSelectModal.tsx
...@@ -201,11 +201,11 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void }) ...@@ -201,11 +201,11 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
)} )}
{/* route components */} {/* route components */}
{!searchKey && parentId && ( {!searchKey && parentId && (
<Flex mt={2} px={[3, 6]}> <Flex mt={1} px={[3, 6]}>
<FolderPath paths={paths} FirstPathDom={null} onClick={onUpdateParentId} /> <FolderPath paths={paths} FirstPathDom={null} onClick={onUpdateParentId} />
</Flex> </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%'}> <Box overflow={'overlay'} height={'100%'}>
<RenderList <RenderList
templates={templates} templates={templates}
......
projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/components/NodeTemplates/header.tsx
...@@ -178,7 +178,7 @@ const NodeTemplateListHeader = ({ ...@@ -178,7 +178,7 @@ const NodeTemplateListHeader = ({
{templateType === TemplateTypeEnum.appTool && {templateType === TemplateTypeEnum.appTool &&
selectedTagIds !== undefined && selectedTagIds !== undefined &&
setSelectedTagIds && ( setSelectedTagIds && (
<Box mt={2}> <Box mt={2} mb={-1}>
<ToolTagFilterBox <ToolTagFilterBox
tags={toolTags} tags={toolTags}
selectedTagIds={selectedTagIds} selectedTagIds={selectedTagIds}
......
projects/app/src/pageComponents/chat/ChatSetting/ToolSelectModal.tsx
...@@ -134,7 +134,7 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void }) ...@@ -134,7 +134,7 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
</Box> </Box>
{/* Tag filter */} {/* Tag filter */}
{allTags.length > 0 && ( {allTags.length > 0 && (
<Box mt={3} px={[3, 6]}> <Box mt={3} mb={-1} px={[3, 6]}>
<ToolTagFilterBox <ToolTagFilterBox
size="sm" size="sm"
tags={allTags} tags={allTags}
......
projects/app/src/pages/config/tool/marketplace.tsx
...@@ -400,7 +400,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => { ...@@ -400,7 +400,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => {
transition={'opacity 0.15s ease-out'} transition={'opacity 0.15s ease-out'}
pointerEvents={showCompactSearch ? 'auto' : 'none'} pointerEvents={showCompactSearch ? 'auto' : 'none'}
> >
<Flex mt={2} pt={4} alignItems={'center'}> <Flex mt={2} pt={4} alignItems={'start'}>
<Flex <Flex
alignItems={'center'} alignItems={'center'}
transition={'all 0.3s'} transition={'all 0.3s'}
...@@ -454,7 +454,8 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => { ...@@ -454,7 +454,8 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => {
cursor={'pointer'} cursor={'pointer'}
borderRadius={'10px'} borderRadius={'10px'}
_hover={{ borderColor: 'primary.600' }} _hover={{ borderColor: 'primary.600' }}
p={2} px={2}
h={'35px'}
border={'1px solid'} border={'1px solid'}
borderColor={'myGray.200'} borderColor={'myGray.200'}
onClick={() => setIsSearchExpanded(true)} onClick={() => setIsSearchExpanded(true)}
...@@ -466,7 +467,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => { ...@@ -466,7 +467,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => {
</Flex> </Flex>
)} )}
</Flex> </Flex>
<Box overflow={'auto'} mr={6}> <Box overflow={'auto'} mr={6} mb={-1}>
<ToolTagFilterBox <ToolTagFilterBox
tags={allTags} tags={allTags}
selectedTagIds={tagIds} selectedTagIds={tagIds}
...@@ -551,7 +552,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => { ...@@ -551,7 +552,7 @@ const ToolkitMarketplace = ({ marketplaceUrl }: { marketplaceUrl: string }) => {
pointerEvents={showCompactSearch ? 'none' : 'auto'} pointerEvents={showCompactSearch ? 'none' : 'auto'}
userSelect={'none'} userSelect={'none'}
> >
<Box flex={'1'} overflow={'auto'}> <Box flex={'1'} overflow={'auto'} mb={-1}>
<ToolTagFilterBox <ToolTagFilterBox
tags={allTags} tags={allTags}
selectedTagIds={tagIds} selectedTagIds={tagIds}
......
projects/app/src/pages/plugin/tool/index.tsx
...@@ -190,7 +190,7 @@ const ToolKitProvider = () => { ...@@ -190,7 +190,7 @@ const ToolKitProvider = () => {
)} )}
</Flex> </Flex>
{/* Tags */} {/* Tags */}
<Flex mt={2} mb={4} alignItems={'center'}> <Flex mt={2} mb={3} alignItems={'start'}>
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
<Flex <Flex
alignItems={'center'} alignItems={'center'}
...@@ -263,7 +263,7 @@ const ToolKitProvider = () => { ...@@ -263,7 +263,7 @@ const ToolKitProvider = () => {
)} )}
</Flex> </Flex>
</Flex> </Flex>
<Box flex={'1'} overflow={'auto'}> <Box flex={'1'} overflow={'auto'} mb={-1}>
<ToolTagFilterBox <ToolTagFilterBox
tags={tags} tags={tags}
selectedTagIds={selectedTagIds} selectedTagIds={selectedTagIds}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment