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 = ({ 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 = ({ modelGroups, provid return ( 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 = ({ modelGroups, provid paddingBottom: '8px' }}> {(row) => { - const isCollapsed = collapsedGroups.has(row.groupName) - return ( - + if (row.type === 'group') { + const isCollapsed = collapsedGroups.has(row.groupName) + return ( handleGroupToggle(row.groupName)}> = ({ modelGroups, provid {row.models.length} - {renderGroupTools(row.models)} + {renderGroupTools(row.models)} - {!isCollapsed && ( - 60} - overscan={5} - scrollerStyle={{ paddingBottom: '8px' }} - itemContainerStyle={{ - padding: '8px 8px 2px 8px' - }}> - {(model) => ( - - )} - - )} - + ) + } + + return ( + ) }} @@ -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)