feat(DraggableList): add listProps support for custom list configurations

- Enhanced DraggableList component to accept listProps, allowing for customization of the Ant Design List component.
- Updated MCPSettings to utilize the new listProps feature, providing a custom empty state message when no servers are available.
This commit is contained in:
kangfenmao 2025-08-21 15:14:07 +08:00
parent fe097a937c
commit ea797ac88a
2 changed files with 19 additions and 9 deletions

View File

@ -9,13 +9,14 @@ import {
ResponderProvided
} from '@hello-pangea/dnd'
import { droppableReorder } from '@renderer/utils'
import { List } from 'antd'
import { List, ListProps } from 'antd'
import { FC } from 'react'
interface Props<T> {
list: T[]
style?: React.CSSProperties
listStyle?: React.CSSProperties
listProps?: ListProps<T>
children: (item: T, index: number) => React.ReactNode
onUpdate: (list: T[]) => void
onDragStart?: OnDragStartResponder
@ -28,6 +29,7 @@ const DraggableList: FC<Props<any>> = ({
list,
style,
listStyle,
listProps,
droppableProps,
onDragStart,
onUpdate,
@ -51,6 +53,7 @@ const DraggableList: FC<Props<any>> = ({
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef} style={style}>
<List
{...listProps}
dataSource={list}
renderItem={(item, index) => {
const id = item.id || item

View File

@ -210,7 +210,21 @@ const McpServersList: FC = () => {
</Button>
</ButtonGroup>
</ListHeader>
<DraggableList style={{ width: '100%' }} list={mcpServers} onUpdate={updateMcpServers}>
<DraggableList
style={{ width: '100%' }}
list={mcpServers}
onUpdate={updateMcpServers}
listProps={{
locale: {
emptyText: (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={t('settings.mcp.noServers')}
style={{ marginTop: 20 }}
/>
)
}
}}>
{(server: MCPServer) => (
<div onClick={() => navigate(`/settings/mcp/settings/${encodeURIComponent(server.id)}`)}>
<McpServerCard
@ -225,13 +239,6 @@ const McpServersList: FC = () => {
</div>
)}
</DraggableList>
{mcpServers.length === 0 && (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={t('settings.mcp.noServers')}
style={{ marginTop: 20 }}
/>
)}
<McpMarketList />
<BuiltinMCPServerList />