Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-27 12:51:26 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit f60f6267e6.
This commit is contained in:
icarus 2025-08-01 18:03:51 +08:00
parent f60f6267e6
commit f8c471105e
1 changed files with 24 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/renderer/src/components/ModelList/ManageModelsList.tsx
View File

@ -54,33 +54,23 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ 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<ManageModelsListProps> = ({ modelGroups, provid
return (
<DynamicVirtualList
list={displayedGroups}
list={flatRows}
estimateSize={useCallback(() => 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<ManageModelsListProps> = ({ modelGroups, provid
paddingBottom: '8px'
}}>
{(row) => {
const isCollapsed = collapsedGroups.has(row.groupName)
return (
<GroupContainer>
if (row.type === 'group') {
const isCollapsed = collapsedGroups.has(row.groupName)
return (
<GroupHeader
style={{
background: 'var(--color-background-soft)',
borderRadius: isCollapsed ? '1em' : '1em 1em 0 0'
}}
style={{ background: 'var(--color-background)' }}
onClick={() => handleGroupToggle(row.groupName)}>
<Flex align="center" gap={10} style={{ flex: 1 }}>
<ChevronRight
@ -168,28 +155,13 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
{row.models.length}
</CustomTag>
</Flex>
<ToolsGroup>{renderGroupTools(row.models)}</ToolsGroup>
{renderGroupTools(row.models)}
</GroupHeader>
{!isCollapsed && (
<DynamicVirtualList
list={row.models}
estimateSize={() => 60}
overscan={5}
scrollerStyle={{ paddingBottom: '8px' }}
itemContainerStyle={{
padding: '8px 8px 2px 8px'
}}>
{(model) => (
<ModelListItem
model={model}
provider={provider}
onAddModel={onAddModel}
onRemoveModel={onRemoveModel}
/>
)}
</DynamicVirtualList>
)}
</GroupContainer>
)
}
return (
<ModelListItem model={row.model} provider={provider} onAddModel={onAddModel} onRemoveModel={onRemoveModel} />
)
}}
</DynamicVirtualList>
@ -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)