From f60f6267e624aa91153150cabd0861fd5431be02 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Fri, 1 Aug 2025 17:32:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ModelList):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E4=BC=98=E5=8C=96=E5=88=86=E7=BB=84=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将扁平化列表结构改为嵌套结构，提升分组模型的渲染性能
移除不必要的状态依赖，简化组件逻辑
添加分组容器样式，改善视觉呈现
---
 .../components/ModelList/ManageModelsList.tsx | 92 ++++++++++++++-----
 1 file changed, 68 insertions(+), 24 deletions(-)

diff --git a/src/renderer/src/components/ModelList/ManageModelsList.tsx b/src/renderer/src/components/ModelList/ManageModelsList.tsx
index 1100f6575b..43c573b929 100644
--- a/src/renderer/src/components/ModelList/ManageModelsList.tsx
+++ b/src/renderer/src/components/ModelList/ManageModelsList.tsx
@@ -54,23 +54,33 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
   }, [])
 
   // 将分组数据扁平化为单一列表，过滤掉空组
-  const flatRows = useMemo(() => {
-    const rows: RowData[] = []
+  // const flatRows = useMemo(() => {
+  //   const rows: RowData[] = []
 
+  //   Object.entries(modelGroups).forEach(([groupName, models]) => {
+  //     if (models.length > 0) {
+  //       // 只添加非空组
+  //       rows.push({ type: 'group', groupName, models })
+  //       if (!collapsedGroups.has(groupName)) {
+  //         models.forEach((model) => {
+  //           rows.push({ type: 'model', model })
+  //         })
+  //       }
+  //     }
+  //   })
+
+  //   return rows
+  // }, [modelGroups, collapsedGroups])
+
+  const displayedGroups = useMemo(() => {
+    const groups: GroupRowData[] = []
     Object.entries(modelGroups).forEach(([groupName, models]) => {
       if (models.length > 0) {
-        // 只添加非空组
-        rows.push({ type: 'group', groupName, models })
-        if (!collapsedGroups.has(groupName)) {
-          models.forEach((model) => {
-            rows.push({ type: 'model', model })
-          })
-        }
+        groups.push({ type: 'group', groupName, models })
       }
     })
-
-    return rows
-  }, [modelGroups, collapsedGroups])
+    return groups
+  }, [modelGroups])
 
   const renderGroupTools = useCallback(
     (models: Model[]) => {
@@ -126,9 +136,9 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
 
   return (
     <DynamicVirtualList
-      list={flatRows}
+      list={displayedGroups}
       estimateSize={useCallback(() => 60, [])}
-      isSticky={useCallback((index: number) => flatRows[index].type === 'group', [flatRows])}
+      isSticky={useCallback(() => true, [])}
       overscan={5}
       scrollerStyle={{
         paddingRight: '10px'
@@ -137,11 +147,14 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
         paddingBottom: '8px'
       }}>
       {(row) => {
-        if (row.type === 'group') {
-          const isCollapsed = collapsedGroups.has(row.groupName)
-          return (
+        const isCollapsed = collapsedGroups.has(row.groupName)
+        return (
+          <GroupContainer>
             <GroupHeader
-              style={{ background: 'var(--color-background)' }}
+              style={{
+                background: 'var(--color-background-soft)',
+                borderRadius: isCollapsed ? '1em' : '1em 1em 0 0'
+              }}
               onClick={() => handleGroupToggle(row.groupName)}>
               <Flex align="center" gap={10} style={{ flex: 1 }}>
                 <ChevronRight
@@ -155,13 +168,28 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
                   {row.models.length}
                 </CustomTag>
               </Flex>
-              {renderGroupTools(row.models)}
+              <ToolsGroup>{renderGroupTools(row.models)}</ToolsGroup>
             </GroupHeader>
-          )
-        }
-
-        return (
-          <ModelListItem model={row.model} provider={provider} onAddModel={onAddModel} onRemoveModel={onRemoveModel} />
+            {!isCollapsed && (
+              <DynamicVirtualList
+                list={row.models}
+                estimateSize={() => 60}
+                overscan={5}
+                scrollerStyle={{ paddingBottom: '8px' }}
+                itemContainerStyle={{
+                  padding: '8px 8px 2px 8px'
+                }}>
+                {(model) => (
+                  <ModelListItem
+                    model={model}
+                    provider={provider}
+                    onAddModel={onAddModel}
+                    onRemoveModel={onRemoveModel}
+                  />
+                )}
+              </DynamicVirtualList>
+            )}
+          </GroupContainer>
         )
       }}
     </DynamicVirtualList>
@@ -211,4 +239,20 @@ const GroupHeader = styled.div`
   cursor: pointer;
 `
 
+const GroupContainer = styled.div`
+  border: 1px solid var(--color-border);
+  border-radius: 1em;
+  margin-bottom: 8px;
+`
+
+const ToolsGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 8px;
+  min-height: 20px;
+  color: var(--color-text);
+  cursor: pointer;
+`
+
 export default memo(ManageModelsList)