From 87e7c23da46ca28f2e2010957ef7122879402e4e Mon Sep 17 00:00:00 2001
From: Archer <545436317@qq.com>
Date: Fri, 20 Dec 2024 19:38:20 +0800
Subject: [PATCH] 4.8.16 test (#3445)

* perf: model selector ux

* perf: model selector ux
---
 .../common/MySelect/MultipleRowSelect.tsx     | 28 +++++++++++++------
 .../src/components/Select/AIModelSelector.tsx |  1 +
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/common/MySelect/MultipleRowSelect.tsx b/packages/web/components/common/MySelect/MultipleRowSelect.tsx
index d8d60c107..52cf223b3 100644
--- a/packages/web/components/common/MySelect/MultipleRowSelect.tsx
+++ b/packages/web/components/common/MySelect/MultipleRowSelect.tsx
@@ -24,10 +24,12 @@ export const MultipleRowSelect = ({
   emptyTip,
   maxH = 300,
   onSelect,
-  popDirection = 'bottom',
   ButtonProps,
-  changeOnEverySelect = false
-}: MultipleSelectProps) => {
+  changeOnEverySelect = false,
+  rowMinWidth = 'autp'
+}: MultipleSelectProps & {
+  rowMinWidth?: string;
+}) => {
   const { t } = useTranslation();
   const ButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -58,6 +60,15 @@ export const MultipleRowSelect = ({
       const children = list[selectedIndex]?.children || [];
       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 (
         <>
           <Box
@@ -68,7 +79,7 @@ export const MultipleRowSelect = ({
             flex={'1 0 auto'}
             px={2}
             borderLeft={index !== 0 ? 'base' : 'none'}
-            minW={index !== 0 ? minWidth : 'auto'}
+            minW={index !== 0 ? minWidth : rowMinWidth}
             maxH={`${maxH}px`}
             overflowY={'auto'}
             whiteSpace={'nowrap'}
@@ -81,10 +92,11 @@ export const MultipleRowSelect = ({
                     SelectedItemRef.current[index] = ref;
                   }
                 }}
-                py={2}
+                py={1.5}
+                _notLast={{ mb: 1 }}
                 cursor={'pointer'}
-                px={2}
-                borderRadius={'md'}
+                px={1.5}
+                borderRadius={'sm'}
                 _hover={{
                   bg: 'primary.50'
                 }}
@@ -194,7 +206,6 @@ export const MultipleRowSelect = ({
               : `${width} !important`;
           })()}
           w={'auto'}
-          px={'6px'}
           py={'6px'}
           border={'1px solid #fff'}
           boxShadow={
@@ -204,6 +215,7 @@ export const MultipleRowSelect = ({
           maxH={'40vh'}
           overflowY={'auto'}
           display={'flex'}
+          userSelect={'none'}
         >
           <RenderList list={list} index={0} />
         </MenuList>
diff --git a/projects/app/src/components/Select/AIModelSelector.tsx b/projects/app/src/components/Select/AIModelSelector.tsx
index e72e24be0..7d012e40b 100644
--- a/projects/app/src/components/Select/AIModelSelector.tsx
+++ b/projects/app/src/components/Select/AIModelSelector.tsx
@@ -205,6 +205,7 @@ const MultipleRowSelector = ({ list, onchange, disableTip, ...props }: Props) =>
           list={selectorList}
           onSelect={onSelect}
           value={value}
+          rowMinWidth="160px"
           ButtonProps={{
             isDisabled: !!disableTip
           }}