ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-07-23 13:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

4.8.16 test (#3445)

Browse Source 
* perf: model selector ux

* perf: model selector ux
This commit is contained in:
Archer
2024-12-20 19:38:20 +08:00
committed by GitHub
parent e6d53e3daa
commit 87e7c23da4
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/web/components/common/MySelect/MultipleRowSelect.tsx
View File

@@ -24,10 +24,12 @@ export const MultipleRowSelect = ({
emptyTip, emptyTip,
maxH = 300, maxH = 300,
onSelect, onSelect,
popDirection = 'bottom',
ButtonProps, ButtonProps,
changeOnEverySelect = false changeOnEverySelect = false,
}: MultipleSelectProps) => { rowMinWidth = 'autp'
}: MultipleSelectProps & {
rowMinWidth?: string;
}) => {
const { t } = useTranslation(); const { t } = useTranslation();
const ButtonRef = useRef<HTMLButtonElement>(null); const ButtonRef = useRef<HTMLButtonElement>(null);
@@ -58,6 +60,15 @@ export const MultipleRowSelect = ({
const children = list[selectedIndex]?.children || []; const children = list[selectedIndex]?.children || [];
const hasChildren = list.some((item) => item.children && item.children?.length > 0); const hasChildren = list.some((item) => item.children && item.children?.length > 0);
// Store current scroll position before update
const currentScrollTop = MenuRef.current[index]?.scrollTop;
// Use useEffect to restore scroll position after render
useEffect(() => {
if (currentScrollTop !== undefined && MenuRef.current[index]) {
MenuRef.current[index]!.scrollTop = currentScrollTop;
}
}, [cloneValue, currentScrollTop]);
return ( return (
<> <>
<Box <Box
@@ -68,7 +79,7 @@ export const MultipleRowSelect = ({
flex={'1 0 auto'} flex={'1 0 auto'}
px={2} px={2}
borderLeft={index !== 0 ? 'base' : 'none'} borderLeft={index !== 0 ? 'base' : 'none'}
minW={index !== 0 ? minWidth : 'auto'} minW={index !== 0 ? minWidth : rowMinWidth}
maxH={`${maxH}px`} maxH={`${maxH}px`}
overflowY={'auto'} overflowY={'auto'}
whiteSpace={'nowrap'} whiteSpace={'nowrap'}
@@ -81,10 +92,11 @@ export const MultipleRowSelect = ({
SelectedItemRef.current[index] = ref; SelectedItemRef.current[index] = ref;
} }
}} }}
py={2} py={1.5}
_notLast={{ mb: 1 }}
cursor={'pointer'} cursor={'pointer'}
px={2} px={1.5}
borderRadius={'md'} borderRadius={'sm'}
_hover={{ _hover={{
bg: 'primary.50' bg: 'primary.50'
}} }}
@@ -194,7 +206,6 @@ export const MultipleRowSelect = ({
: `${width} !important`; : `${width} !important`;
})()} })()}
w={'auto'} w={'auto'}
px={'6px'}
py={'6px'} py={'6px'}
border={'1px solid #fff'} border={'1px solid #fff'}
boxShadow={ boxShadow={
@@ -204,6 +215,7 @@ export const MultipleRowSelect = ({
maxH={'40vh'} maxH={'40vh'}
overflowY={'auto'} overflowY={'auto'}
display={'flex'} display={'flex'}
userSelect={'none'}
> >
<RenderList list={list} index={0} /> <RenderList list={list} index={0} />
</MenuList> </MenuList>

1
projects/app/src/components/Select/AIModelSelector.tsx
View File

@@ -205,6 +205,7 @@ const MultipleRowSelector = ({ list, onchange, disableTip, ...props }: Props) =>
list={selectorList} list={selectorList}
onSelect={onSelect} onSelect={onSelect}
value={value} value={value}
rowMinWidth="160px"
ButtonProps={{ ButtonProps={{
isDisabled: !!disableTip isDisabled: !!disableTip
}} }}