fix:修复api调用问题

This commit is contained in:
Jerry 2025-07-18 18:28:45 +08:00
parent fcf072636e
commit 65d92a8777
2 changed files with 91 additions and 19 deletions

View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useState, useEffect } from 'react';
import { import {
Box, Box,
VStack, VStack,
@ -7,9 +7,13 @@ import {
Button, Button,
Text, Text,
Spinner, Spinner,
Table,
Badge, Badge,
HStack, HStack,
Table, Select,
Field,
Portal,
createListCollection,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import DocumentTitle from '@/components/system/pages/DocumentTitle'; import DocumentTitle from '@/components/system/pages/DocumentTitle';
import PageContainer from '@/components/system/PageContainer'; import PageContainer from '@/components/system/PageContainer';
@ -28,22 +32,28 @@ import scanEffect from '@/libs/script/scanPage/scanEffect';
*/ */
const ScanPage = () => { const ScanPage = () => {
const [subnet, setSubnet] = useState(''); const [subnet, setSubnet] = useState('');
const [devices, setDevices] = useState([]); const [networkAdapters, setNetworkAdapters] = useState(createListCollection({ items: [] }));
const [scannedDevices, setScannedDevices] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [localIp, setLocalIp] = useState(''); const [localIp, setLocalIp] = useState('');
const [selectedNetwork, setSelectedNetwork] = useState('');
const [inputMode, setInputMode] = useState(false);
const config = ConfigTool.load(); const config = ConfigTool.load();
const testMode = config.testMode; const testMode = config.testMode;
useEffect(() => { useEffect(() => {
scanEffect api.getNetworkAdapters().then((response) => {
.fetchLocalInfo({ const { networks } = response.data;
setLocalIp: setLocalIp, const networkCollection = createListCollection({
setSubnet: setSubnet, items: networks.map((network) => ({
subnet: subnet, label: `${network.adapter} (${network.network})`,
}) value: network.network,
.then(); })),
}, [subnet, Notification]); });
setNetworkAdapters(networkCollection);
});
}, []);
const handleScan = async () => { const handleScan = async () => {
setLoading(true); setLoading(true);
@ -57,17 +67,18 @@ const ScanPage = () => {
}); });
} else { } else {
const res = await api.scan(subnet); const res = await api.scan(subnet);
scanDevices = res.devices || []; console.log(`res:${JSON.stringify(res)}`);
scanDevices = res.data.devices || [];
Notification.success({ Notification.success({
title: '扫描子网设备成功!', title: '扫描子网设备成功!',
}); });
} }
console.log(`device:${JSON.stringify(scanDevices)}`);
scanDevices = scanDevices.map((d, idx) => ({ scanDevices = scanDevices.map((d, idx) => ({
...d, ...d,
name: `交换机 ${idx + 1}`, name: `交换机 ${idx + 1}`,
})); }));
setDevices(scanDevices); setScannedDevices(scanDevices);
const updatedStats = { const updatedStats = {
totalDevices: scanDevices.length, totalDevices: scanDevices.length,
onlineDevices: scanDevices.length, onlineDevices: scanDevices.length,
@ -97,15 +108,20 @@ const ScanPage = () => {
}); });
} else { } else {
const res = await api.listDevices(); const res = await api.listDevices();
scanDevices = res.devices || []; scanDevices = res.data.devices || [];
} }
setDevices(scanDevices); setScannedDevices(scanDevices);
} catch (err) { } catch (err) {
Notification.error({ title: '获取上次扫描记录失败' }); Notification.error({ title: '获取上次扫描记录失败' });
} }
setLoading(false); setLoading(false);
}; };
const handleNetworkChange = ({ value }) => {
setSelectedNetwork(value[0] ?? '');
setSubnet(value[0] ?? '');
};
return ( return (
<DocumentTitle title={'网络扫描'}> <DocumentTitle title={'网络扫描'}>
<DashboardBackground /> <DashboardBackground />
@ -132,6 +148,53 @@ const ScanPage = () => {
</HStack> </HStack>
<HStack mb={4} spacing={4}> <HStack mb={4} spacing={4}>
<Field.Root>
<Field.Label fontWeight={'bold'} mb={1} fontSize="sm">
{'选择网段'}
</Field.Label>
<Select.Root
collection={networkAdapters}
value={selectedNetwork ? [selectedNetwork] : []}
onValueChange={handleNetworkChange}
placeholder={'请选择网段'}
size={'sm'}
colorPalette={'teal'}
>
<Select.HiddenSelect />
<Select.Control>
<Select.Trigger>
<Select.ValueText />
</Select.Trigger>
<Select.IndicatorGroup>
<Select.Indicator />
<Select.ClearTrigger />
</Select.IndicatorGroup>
</Select.Control>
<Portal>
<Select.Positioner>
<Select.Content>
{networkAdapters.items.map((item, index) => (
<Select.Item key={`${item.value}-${index}`} item={item}>
{' '}
{item.label}
</Select.Item>
))}
</Select.Content>
</Select.Positioner>
</Portal>
</Select.Root>
</Field.Root>
<Button
onClick={() => setInputMode(!inputMode)}
colorPalette={'blue'}
variant={'outline'}
>
{inputMode ? '切换为选择模式' : '切换为输入模式'}
</Button>
</HStack>
{inputMode ? (
<Input <Input
placeholder={'输入子网 (如 192.168.1.0/24)'} placeholder={'输入子网 (如 192.168.1.0/24)'}
value={subnet} value={subnet}
@ -139,6 +202,9 @@ const ScanPage = () => {
width={'300px'} width={'300px'}
bg={'whiteAlpha.200'} bg={'whiteAlpha.200'}
/> />
) : null}
<HStack mb={4} spacing={4}>
<Button <Button
onClick={handleScan} onClick={handleScan}
isLoading={loading} isLoading={loading}
@ -164,7 +230,7 @@ const ScanPage = () => {
</HStack> </HStack>
)} )}
{!loading && devices.length > 0 && ( {!loading && scannedDevices.length > 0 && (
<FadeInWrapper delay={0.2} yOffset={-5}> <FadeInWrapper delay={0.2} yOffset={-5}>
<Table.Root <Table.Root
variant={'outline'} variant={'outline'}
@ -193,7 +259,7 @@ const ScanPage = () => {
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{devices.map((d) => ( {scannedDevices.map((d) => (
<Table.Row <Table.Row
key={d.ip} key={d.ip}
_hover={{ _hover={{
@ -211,7 +277,7 @@ const ScanPage = () => {
</FadeInWrapper> </FadeInWrapper>
)} )}
{!loading && devices.length === 0 && ( {!loading && scannedDevices.length === 0 && (
<Text color={'gray.400'}>{'暂无扫描结果,请执行扫描..'}</Text> <Text color={'gray.400'}>{'暂无扫描结果,请执行扫描..'}</Text>
)} )}
</Box> </Box>

View File

@ -52,6 +52,12 @@ export const api = {
applyConfig: (switch_ip, commands) => applyConfig: (switch_ip, commands) =>
axios.post(buildUrl('/api/execute_cli_commands'), { switch_ip: switch_ip, commands: commands }), axios.post(buildUrl('/api/execute_cli_commands'), { switch_ip: switch_ip, commands: commands }),
/**
* 获取网络适配器信息
* @returns {Promise<axios.AxiosResponse<any>>}
*/
getNetworkAdapters: () => axios.get(buildUrl('/api/network_adapters')),
/** /**
* 更新基础URL * 更新基础URL
* @param url * @param url