diff --git a/src/renderer/src/components/ModelList/ManageModelsList.tsx b/src/renderer/src/components/ModelList/ManageModelsList.tsx index 1100f6575b..43c573b929 100644 --- a/src/renderer/src/components/ModelList/ManageModelsList.tsx +++ b/src/renderer/src/components/ModelList/ManageModelsList.tsx @@ -54,23 +54,33 @@ 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) { - // 只添加非空组 - rows.push({ type: 'group', groupName, models }) - if (!collapsedGroups.has(groupName)) { - models.forEach((model) => { - rows.push({ type: 'model', model }) - }) - } + groups.push({ type: 'group', groupName, models }) } }) - - return rows - }, [modelGroups, collapsedGroups]) + return groups + }, [modelGroups]) const renderGroupTools = useCallback( (models: Model[]) => { @@ -126,9 +136,9 @@ const ManageModelsList: React.FC = ({ modelGroups, provid return ( 60, [])} - isSticky={useCallback((index: number) => flatRows[index].type === 'group', [flatRows])} + isSticky={useCallback(() => true, [])} overscan={5} scrollerStyle={{ paddingRight: '10px' @@ -137,11 +147,14 @@ const ManageModelsList: React.FC = ({ modelGroups, provid paddingBottom: '8px' }}> {(row) => { - if (row.type === 'group') { - const isCollapsed = collapsedGroups.has(row.groupName) - return ( + const isCollapsed = collapsedGroups.has(row.groupName) + return ( + handleGroupToggle(row.groupName)}> = ({ modelGroups, provid {row.models.length} - {renderGroupTools(row.models)} + {renderGroupTools(row.models)} - ) - } - - return ( - + {!isCollapsed && ( + 60} + overscan={5} + scrollerStyle={{ paddingBottom: '8px' }} + itemContainerStyle={{ + padding: '8px 8px 2px 8px' + }}> + {(model) => ( + + )} + + )} + ) }} @@ -211,4 +239,20 @@ 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)