From e18286c70e63b7e38f5a84e7569079eec0c67aca Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Fri, 1 Aug 2025 18:36:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ModelList):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E5=88=97=E8=A1=A8=E7=9A=84=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用startTransition优化折叠/展开性能
- 重构数据结构，将单个模型渲染改为批量渲染
- 改进组头和模型项的样式和布局
---
 .../components/ModelList/ManageModelsList.tsx | 153 +++++++++++-------
 1 file changed, 95 insertions(+), 58 deletions(-)

diff --git a/src/renderer/src/components/ModelList/ManageModelsList.tsx b/src/renderer/src/components/ModelList/ManageModelsList.tsx
index 1100f6575b..01daf6230f 100644
--- a/src/renderer/src/components/ModelList/ManageModelsList.tsx
+++ b/src/renderer/src/components/ModelList/ManageModelsList.tsx
@@ -10,7 +10,7 @@ import { Model, Provider } from '@renderer/types'
 import { Button, Flex, Tooltip } from 'antd'
 import { Avatar } from 'antd'
 import { ChevronRight } from 'lucide-react'
-import React, { memo, useCallback, useMemo, useState } from 'react'
+import React, { memo, startTransition, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -23,12 +23,12 @@ interface GroupRowData {
   models: Model[]
 }
 
-interface ModelRowData {
-  type: 'model'
-  model: Model
+interface ModelsRowData {
+  type: 'models'
+  models: Model[]
 }
 
-type RowData = GroupRowData | ModelRowData
+type RowData = GroupRowData | ModelsRowData
 
 interface ManageModelsListProps {
   modelGroups: Record<string, Model[]>
@@ -42,14 +42,16 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
   const [collapsedGroups, setCollapsedGroups] = useState(new Set<string>())
 
   const handleGroupToggle = useCallback((groupName: string) => {
-    setCollapsedGroups((prev) => {
-      const newSet = new Set(prev)
-      if (newSet.has(groupName)) {
-        newSet.delete(groupName) // 如果已折叠，则展开
-      } else {
-        newSet.add(groupName) // 如果已展开，则折叠
-      }
-      return newSet
+    startTransition(() => {
+      setCollapsedGroups((prev) => {
+        const newSet = new Set(prev)
+        if (newSet.has(groupName)) {
+          newSet.delete(groupName) // 如果已折叠，则展开
+        } else {
+          newSet.add(groupName) // 如果已展开，则折叠
+        }
+        return newSet
+      })
     })
   }, [])
 
@@ -62,9 +64,7 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
         // 只添加非空组
         rows.push({ type: 'group', groupName, models })
         if (!collapsedGroups.has(groupName)) {
-          models.forEach((model) => {
-            rows.push({ type: 'model', model })
-          })
+          rows.push({ type: 'models', models })
         }
       }
     })
@@ -132,37 +132,44 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
       overscan={5}
       scrollerStyle={{
         paddingRight: '10px'
-      }}
-      itemContainerStyle={{
-        paddingBottom: '8px'
       }}>
       {(row) => {
         if (row.type === 'group') {
           const isCollapsed = collapsedGroups.has(row.groupName)
           return (
-            <GroupHeader
-              style={{ background: 'var(--color-background)' }}
-              onClick={() => handleGroupToggle(row.groupName)}>
-              <Flex align="center" gap={10} style={{ flex: 1 }}>
-                <ChevronRight
-                  size={16}
-                  color="var(--color-text-3)"
-                  strokeWidth={1.5}
-                  style={{ transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)' }}
+            <GroupHeaderContainer isCollapsed={isCollapsed}>
+              <GroupHeader isCollapsed={isCollapsed} onClick={() => handleGroupToggle(row.groupName)}>
+                <Flex align="center" gap={10} style={{ flex: 1 }}>
+                  <ChevronRight
+                    size={16}
+                    color="var(--color-text-3)"
+                    strokeWidth={1.5}
+                    style={{ transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)' }}
+                  />
+                  <span style={{ fontWeight: 'bold', fontSize: '14px' }}>{row.groupName}</span>
+                  <CustomTag color="#02B96B" size={10}>
+                    {row.models.length}
+                  </CustomTag>
+                </Flex>
+                {renderGroupTools(row.models)}
+              </GroupHeader>
+            </GroupHeaderContainer>
+          )
+        } else {
+          return (
+            <ModelsContainer>
+              {row.models.map((model) => (
+                <ModelListItem
+                  key={model.id}
+                  model={model}
+                  provider={provider}
+                  onAddModel={onAddModel}
+                  onRemoveModel={onRemoveModel}
                 />
-                <span style={{ fontWeight: 'bold', fontSize: '14px' }}>{row.groupName}</span>
-                <CustomTag color="#02B96B" size={10}>
-                  {row.models.length}
-                </CustomTag>
-              </Flex>
-              {renderGroupTools(row.models)}
-            </GroupHeader>
+              ))}
+            </ModelsContainer>
           )
         }
-
-        return (
-          <ModelListItem model={row.model} provider={provider} onAddModel={onAddModel} onRemoveModel={onRemoveModel} />
-        )
       }}
     </DynamicVirtualList>
   )
@@ -180,35 +187,65 @@ const ModelListItem: React.FC<ModelListItemProps> = memo(({ model, provider, onA
   const isAdded = useMemo(() => isModelInProvider(provider, model.id), [provider, model.id])
 
   return (
-    <FileItem
-      style={{
-        backgroundColor: isAdded ? 'rgba(0, 126, 0, 0.06)' : '',
-        border: 'none',
-        boxShadow: 'none'
-      }}
-      fileInfo={{
-        icon: <Avatar src={getModelLogo(model.id)}>{model?.name?.[0]?.toUpperCase()}</Avatar>,
-        name: <ModelIdWithTags model={model} />,
-        extra: model.description && <ExpandableText text={model.description} />,
-        ext: '.model',
-        actions: isAdded ? (
-          <Button type="text" onClick={() => onRemoveModel(model)} icon={<MinusOutlined />} />
-        ) : (
-          <Button type="text" onClick={() => onAddModel(model)} icon={<PlusOutlined />} />
-        )
-      }}
-    />
+    <ModelItem>
+      <FileItem
+        style={{
+          backgroundColor: isAdded ? 'rgba(0, 126, 0, 0.06)' : '',
+          border: 'none',
+          boxShadow: 'none'
+        }}
+        fileInfo={{
+          icon: <Avatar src={getModelLogo(model.id)}>{model?.name?.[0]?.toUpperCase()}</Avatar>,
+          name: <ModelIdWithTags model={model} />,
+          extra: model.description && <ExpandableText text={model.description} />,
+          ext: '.model',
+          actions: isAdded ? (
+            <Button type="text" onClick={() => onRemoveModel(model)} icon={<MinusOutlined />} />
+          ) : (
+            <Button type="text" onClick={() => onAddModel(model)} icon={<PlusOutlined />} />
+          )
+        }}
+      />
+    </ModelItem>
   )
 })
 
-const GroupHeader = styled.div`
+const GroupHeaderContainer = styled.div<{ isCollapsed: boolean }>`
+  background-color: ${(props) => (props.isCollapsed ? 'transparent' : 'var(--color-background)')};
+  padding-bottom: ${(props) => (props.isCollapsed ? '8px' : '0')};
+`
+
+const GroupHeader = styled.div<{ isCollapsed: boolean }>`
   display: flex;
   align-items: center;
+  background: var(--color-background-mute);
+  border-radius: ${(props) => (props.isCollapsed ? '1em' : '1em 1em 0 0')};
   justify-content: space-between;
   padding: 0 8px;
   min-height: 50px;
   color: var(--color-text);
   cursor: pointer;
+  border: 1px solid var(--color-border);
+  border-bottom: none;
+`
+
+const ModelsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--color-border);
+  border-top: none;
+  border-radius: 0 0 1em 1em;
+  margin-bottom: 8px;
+`
+
+const ModelItem = styled.div`
+  flex-direction: row;
+  position: relative;
+  border-radius: var(--list-item-border-radius);
+  border: 0.5px solid transparent;
+  cursor: pointer;
 `
 
 export default memo(ManageModelsList)