diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx index b2455a8ad5..a8eb888813 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx @@ -49,6 +49,9 @@ const ModelList: React.FC = ({ providerId }) => { const { t } = useTranslation() const { provider, models, removeModel } = useProvider(providerId) + // 稳定的编辑模型回调,避免内联函数导致子组件 memo 失效 + const handleEditModel = useCallback((model: Model) => EditModelPopup.show({ provider, model }), [provider]) + const providerConfig = PROVIDER_URLS[provider.id] const docsWebsite = providerConfig?.websites?.docs const modelsWebsite = providerConfig?.websites?.models @@ -63,6 +66,11 @@ const ModelList: React.FC = ({ providerId }) => { const { isChecking: isHealthChecking, modelStatuses, runHealthCheck } = useHealthCheck(provider, models) + // 将 modelStatuses 数组转换为 Map,实现 O(1) 查找 + const modelStatusMap = useMemo(() => { + return new Map(modelStatuses.map((status) => [status.model.id, status])) + }, [modelStatuses]) + const setSearchText = useCallback((text: string) => { startTransition(() => { _setSearchText(text) @@ -138,9 +146,9 @@ const ModelList: React.FC = ({ providerId }) => { key={group} groupName={group} models={displayedModelGroups[group]} - modelStatuses={modelStatuses} + modelStatusMap={modelStatusMap} defaultOpen={i <= 5} - onEditModel={(model) => EditModelPopup.show({ provider, model })} + onEditModel={handleEditModel} onRemoveModel={removeModel} onRemoveGroup={() => displayedModelGroups[group].forEach((model) => removeModel(model))} /> diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx index 0185ef597d..190a49cebd 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx @@ -15,7 +15,8 @@ const MAX_SCROLLER_HEIGHT = 390 interface ModelListGroupProps { groupName: string models: Model[] - modelStatuses: ModelWithStatus[] + /** 使用 Map 实现 O(1) 查找,替代原来的数组线性搜索 */ + modelStatusMap: Map defaultOpen: boolean disabled?: boolean onEditModel: (model: Model) => void @@ -26,7 +27,7 @@ interface ModelListGroupProps { const ModelListGroup: React.FC = ({ groupName, models, - modelStatuses, + modelStatusMap, defaultOpen, disabled, onEditModel, @@ -89,7 +90,7 @@ const ModelListGroup: React.FC = ({ {(model) => ( status.model.id === model.id)} + modelStatus={modelStatusMap.get(model.id)} onEdit={onEditModel} onRemove={onRemoveModel} disabled={disabled}