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

View File

@ -52,6 +52,12 @@ export const api = {
applyConfig: (switch_ip, 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
* @param url