refactor(mcp): improve server list pagination and form validation
This commit is contained in:
@@ -83,8 +83,6 @@ const McpForm: React.FC<McpFormProps> = ({
|
||||
|
||||
const [testLoading, setTestLoading] = useState(false);
|
||||
|
||||
|
||||
|
||||
const [testResult, setTestResult] = useState<{
|
||||
success: boolean;
|
||||
tools?: McpTool[];
|
||||
@@ -121,7 +119,7 @@ const McpForm: React.FC<McpFormProps> = ({
|
||||
return t
|
||||
});
|
||||
setTestResult({
|
||||
success: true,
|
||||
success: tools.length > 0,
|
||||
tools,
|
||||
});
|
||||
}
|
||||
@@ -201,7 +199,7 @@ const McpForm: React.FC<McpFormProps> = ({
|
||||
}
|
||||
|
||||
setTestResult({
|
||||
success: true,
|
||||
success: tools.length > 0,
|
||||
tools,
|
||||
});
|
||||
} else {
|
||||
@@ -359,7 +357,7 @@ const McpForm: React.FC<McpFormProps> = ({
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSubmit}
|
||||
disabled={loading || disabled}
|
||||
disabled={loading || disabled || !testResult?.success}
|
||||
startIcon={loading ? <CircularProgress size={16} /> : undefined}
|
||||
>
|
||||
{loading ? '保存中...' : '保存'}
|
||||
|
||||
@@ -69,6 +69,19 @@ const SearchContainer = styled(Box)(({ theme }) => ({
|
||||
|
||||
|
||||
export default function McpSettingPage() {
|
||||
|
||||
const handleRefreshServer = async (initial?: boolean) => {
|
||||
if (initial) {
|
||||
setCurrentPage(1);
|
||||
} else {
|
||||
await fetchMcpServers({
|
||||
page: currentPage,
|
||||
size: pageSize,
|
||||
keyword: searchString,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
mcpServers,
|
||||
loading,
|
||||
@@ -81,8 +94,8 @@ export default function McpSettingPage() {
|
||||
createMcpServer,
|
||||
updateMcpServer,
|
||||
deleteMcpServer,
|
||||
deleteMcpServers,
|
||||
} = useMcpSetting();
|
||||
batchDeleteMcpServers,
|
||||
} = useMcpSetting({ refreshServer: handleRefreshServer });
|
||||
|
||||
// 本地状态
|
||||
const [searchString, setSearchString] = useState('');
|
||||
@@ -93,24 +106,22 @@ export default function McpSettingPage() {
|
||||
const [editingServer, setEditingServer] = useState<Partial<IMcpServer> | undefined | null>(null);
|
||||
const [importDialogOpen, setImportDialogOpen] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize] = useState(6);
|
||||
const [pageSize] = useState(8);
|
||||
const [importJson, setImportJson] = useState('');
|
||||
|
||||
const showMessage = useMessage()
|
||||
|
||||
// 初始化加载数据
|
||||
useEffect(() => {
|
||||
fetchMcpServers();
|
||||
}, [fetchMcpServers]);
|
||||
fetchMcpServers({
|
||||
page: currentPage,
|
||||
size: pageSize,
|
||||
keyword: searchString,
|
||||
});
|
||||
}, [fetchMcpServers, currentPage, pageSize, searchString]);
|
||||
|
||||
// 过滤和分页逻辑
|
||||
const filteredServers = mcpServers.filter(server =>
|
||||
server.name.toLowerCase().includes(searchString.toLowerCase()) ||
|
||||
server.url.toLowerCase().includes(searchString.toLowerCase())
|
||||
);
|
||||
|
||||
const totalPages = Math.ceil(filteredServers.length / pageSize);
|
||||
const paginatedServers = filteredServers.slice(
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
const paginatedServers = mcpServers.slice(
|
||||
(currentPage - 1) * pageSize,
|
||||
currentPage * pageSize
|
||||
);
|
||||
@@ -185,7 +196,7 @@ export default function McpSettingPage() {
|
||||
};
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
const result = await deleteMcpServers(selectedServers);
|
||||
const result = await batchDeleteMcpServers(selectedServers);
|
||||
if (result.success) {
|
||||
showMessage.success('批量删除成功');
|
||||
setSelectedServers([]);
|
||||
@@ -309,6 +320,7 @@ export default function McpSettingPage() {
|
||||
</PageHeader>
|
||||
|
||||
<SearchContainer>
|
||||
<Box>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder="Search MCP servers..."
|
||||
@@ -319,6 +331,7 @@ export default function McpSettingPage() {
|
||||
}}
|
||||
sx={{ width: 300 }}
|
||||
/>
|
||||
</Box>
|
||||
{selectedServers.length > 0 && (
|
||||
<Box display="flex" gap={1}>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user