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

This reverts commit f60f6267e624aa91153150cabd0861fd5431be02.
---
 .../components/ModelList/ManageModelsList.tsx | 92 +++++--------------
 1 file changed, 24 insertions(+), 68 deletions(-)

diff --git a/src/renderer/src/components/ModelList/ManageModelsList.tsx b/src/renderer/src/components/ModelList/ManageModelsList.tsx
index 43c573b929..1100f6575b 100644
--- a/src/renderer/src/components/ModelList/ManageModelsList.tsx
+++ b/src/renderer/src/components/ModelList/ManageModelsList.tsx
@@ -54,33 +54,23 @@ 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) {
-        groups.push({ type: 'group', groupName, models })
+        // 只添加非空组
+        rows.push({ type: 'group', groupName, models })
+        if (!collapsedGroups.has(groupName)) {
+          models.forEach((model) => {
+            rows.push({ type: 'model', model })
+          })
+        }
       }
     })
-    return groups
-  }, [modelGroups])
+
+    return rows
+  }, [modelGroups, collapsedGroups])
 
   const renderGroupTools = useCallback(
     (models: Model[]) => {
@@ -136,9 +126,9 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
 
   return (
     <DynamicVirtualList
-      list={displayedGroups}
+      list={flatRows}
       estimateSize={useCallback(() => 60, [])}
-      isSticky={useCallback(() => true, [])}
+      isSticky={useCallback((index: number) => flatRows[index].type === 'group', [flatRows])}
       overscan={5}
       scrollerStyle={{
         paddingRight: '10px'
@@ -147,14 +137,11 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
         paddingBottom: '8px'
       }}>
       {(row) => {
-        const isCollapsed = collapsedGroups.has(row.groupName)
-        return (
-          <GroupContainer>
+        if (row.type === 'group') {
+          const isCollapsed = collapsedGroups.has(row.groupName)
+          return (
             <GroupHeader
-              style={{
-                background: 'var(--color-background-soft)',
-                borderRadius: isCollapsed ? '1em' : '1em 1em 0 0'
-              }}
+              style={{ background: 'var(--color-background)' }}
               onClick={() => handleGroupToggle(row.groupName)}>
               <Flex align="center" gap={10} style={{ flex: 1 }}>
                 <ChevronRight
@@ -168,28 +155,13 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
                   {row.models.length}
                 </CustomTag>
               </Flex>
-              <ToolsGroup>{renderGroupTools(row.models)}</ToolsGroup>
+              {renderGroupTools(row.models)}
             </GroupHeader>
-            {!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>
+          )
+        }
+
+        return (
+          <ModelListItem model={row.model} provider={provider} onAddModel={onAddModel} onRemoveModel={onRemoveModel} />
         )
       }}
     </DynamicVirtualList>
@@ -239,20 +211,4 @@ 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)