From 63198ee3d2a1b20b43ffd289ca1e346d90ec7946 Mon Sep 17 00:00:00 2001
From: Phantom <59059173+EurFelux@users.noreply.github.com>
Date: Sun, 3 Aug 2025 11:00:04 +0800
Subject: [PATCH] refactor(ModelList): improve group style (#8761)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(ModelList): 重构模型列表组件结构，优化分组渲染逻辑

将扁平化列表结构改为嵌套结构，提升分组模型的渲染性能
移除不必要的状态依赖，简化组件逻辑
添加分组容器样式，改善视觉呈现

* Revert "refactor(ModelList): 重构模型列表组件结构，优化分组渲染逻辑"

This reverts commit f60f6267e624aa91153150cabd0861fd5431be02.

* refactor(ModelList): 优化模型列表的渲染和样式

- 使用startTransition优化折叠/展开性能
- 重构数据结构，将单个模型渲染改为批量渲染
- 改进组头和模型项的样式和布局

* Revert "refactor(ModelList): 优化模型列表的渲染和样式"

This reverts commit e18286c70e63b7e38f5a84e7569079eec0c67aca.

* feat(模型列表): 优化模型列表项的样式和分组显示

添加last属性标记列表最后一项，优化分组标题和列表项的样式
移除多余的底部间距，调整边框圆角以提升视觉一致性

* refactor: 移除调试用的console.log语句

* style(ManageModelsList): 调整分组标题的内边距以改善视觉间距

* style(ModelList): 移动按钮位置

* style(ManageModelsList): 调整列表项和分组标题的高度以优化空间使用

* style(ManageModelsList): 为滚动容器添加圆角边框样式
---
 .../components/ModelList/ManageModelsList.tsx | 125 +++++++++++-------
 .../src/components/ModelList/ModelList.tsx    |  16 +--
 2 files changed, 85 insertions(+), 56 deletions(-)

diff --git a/src/renderer/src/components/ModelList/ManageModelsList.tsx b/src/renderer/src/components/ModelList/ManageModelsList.tsx
index 1100f6575b..92ea801348 100644
--- a/src/renderer/src/components/ModelList/ManageModelsList.tsx
+++ b/src/renderer/src/components/ModelList/ManageModelsList.tsx
@@ -26,6 +26,7 @@ interface GroupRowData {
 interface ModelRowData {
   type: 'model'
   model: Model
+  last?: boolean
 }
 
 type RowData = GroupRowData | ModelRowData
@@ -62,9 +63,16 @@ 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(
+            ...models.map(
+              (model, index) =>
+                ({
+                  type: 'model',
+                  model,
+                  last: index === models.length - 1 ? true : undefined
+                }) as const
+            )
+          )
         }
       }
     })
@@ -131,37 +139,41 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
       isSticky={useCallback((index: number) => flatRows[index].type === 'group', [flatRows])}
       overscan={5}
       scrollerStyle={{
-        paddingRight: '10px'
-      }}
-      itemContainerStyle={{
-        paddingBottom: '8px'
+        paddingRight: '10px',
+        borderRadius: '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)' }}
-                />
-                <span style={{ fontWeight: 'bold', fontSize: '14px' }}>{row.groupName}</span>
-                <CustomTag color="#02B96B" size={10}>
-                  {row.models.length}
-                </CustomTag>
-              </Flex>
-              {renderGroupTools(row.models)}
-            </GroupHeader>
+            <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>
           )
         }
 
         return (
-          <ModelListItem model={row.model} provider={provider} onAddModel={onAddModel} onRemoveModel={onRemoveModel} />
+          <ModelListItem
+            last={row.last}
+            model={row.model}
+            provider={provider}
+            onAddModel={onAddModel}
+            onRemoveModel={onRemoveModel}
+          />
         )
       }}
     </DynamicVirtualList>
@@ -174,41 +186,58 @@ interface ModelListItemProps {
   provider: Provider
   onAddModel: (model: Model) => void
   onRemoveModel: (model: Model) => void
+  last?: boolean
 }
 
-const ModelListItem: React.FC<ModelListItemProps> = memo(({ model, provider, onAddModel, onRemoveModel }) => {
+const ModelListItem: React.FC<ModelListItemProps> = memo(({ model, provider, onAddModel, onRemoveModel, last }) => {
   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 />} />
-        )
-      }}
-    />
+    <ModelListItemContainer last={last}>
+      <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 />} />
+          )
+        }}
+      />
+    </ModelListItemContainer>
   )
 })
 
-const GroupHeader = styled.div`
+const GroupHeader = styled.div<{ isCollapsed: boolean }>`
   display: flex;
+  background-color: var(--color-background-mute);
+  border-radius: ${(props) => (props.isCollapsed ? '8px' : '8px 8px 0 0')};
   align-items: center;
   justify-content: space-between;
-  padding: 0 8px;
-  min-height: 50px;
+  padding: 0 13px;
+  min-height: 35px;
   color: var(--color-text);
   cursor: pointer;
 `
 
+const GroupHeaderContainer = styled.div<{ isCollapsed: boolean }>`
+  padding-bottom: ${(props) => (props.isCollapsed ? '8px' : '0')};
+`
+
+const ModelListItemContainer = styled.div<{ last?: boolean }>`
+  border: 1px solid var(--color-border);
+  padding: 4px;
+  border-top: none;
+  border-radius: ${(props) => (props.last ? '0 0 8px 8px' : '0')};
+  border-bottom: ${(props) => (props.last ? '1px solid var(--color-border)' : 'none')};
+  margin-bottom: ${(props) => (props.last ? '8px' : '0')};
+`
+
 export default memo(ManageModelsList)
diff --git a/src/renderer/src/components/ModelList/ModelList.tsx b/src/renderer/src/components/ModelList/ModelList.tsx
index b0ad8e3c99..897e88de40 100644
--- a/src/renderer/src/components/ModelList/ModelList.tsx
+++ b/src/renderer/src/components/ModelList/ModelList.tsx
@@ -206,14 +206,14 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
         ) : (
           <div style={{ height: 5 }} />
         )}
-        <Flex gap={10} style={{ marginTop: 12 }}>
-          <Button type="primary" onClick={onManageModel} icon={<ListCheck size={16} />} disabled={isHealthChecking}>
-            {t('button.manage')}
-          </Button>
-          <Button type="default" onClick={onAddModel} icon={<Plus size={16} />} disabled={isHealthChecking}>
-            {t('button.add')}
-          </Button>
-        </Flex>
+      </Flex>
+      <Flex gap={10} style={{ marginTop: 12 }}>
+        <Button type="primary" onClick={onManageModel} icon={<ListCheck size={16} />} disabled={isHealthChecking}>
+          {t('button.manage')}
+        </Button>
+        <Button type="default" onClick={onAddModel} icon={<Plus size={16} />} disabled={isHealthChecking}>
+          {t('button.add')}
+        </Button>
       </Flex>
     </>
   )