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 = ({ 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 = ({ 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 ( - handleGroupToggle(row.groupName)}> - - - {row.groupName} - - {row.models.length} - - - {renderGroupTools(row.models)} - + + handleGroupToggle(row.groupName)}> + + + {row.groupName} + + {row.models.length} + + + {renderGroupTools(row.models)} + + ) } return ( - + ) }} @@ -174,41 +186,58 @@ interface ModelListItemProps { provider: Provider onAddModel: (model: Model) => void onRemoveModel: (model: Model) => void + last?: boolean } -const ModelListItem: React.FC = memo(({ model, provider, onAddModel, onRemoveModel }) => { +const ModelListItem: React.FC = memo(({ model, provider, onAddModel, onRemoveModel, last }) => { const isAdded = useMemo(() => isModelInProvider(provider, model.id), [provider, model.id]) - return ( - {model?.name?.[0]?.toUpperCase()}, - name: , - extra: model.description && , - ext: '.model', - actions: isAdded ? ( - - - + + + + )