diff --git a/src/frontend/src/pages/ConfigPage.jsx b/src/frontend/src/pages/ConfigPage.jsx index 5e77270..7aaea86 100644 --- a/src/frontend/src/pages/ConfigPage.jsx +++ b/src/frontend/src/pages/ConfigPage.jsx @@ -8,10 +8,12 @@ import { HStack, Portal, Select, + Spinner, Text, Textarea, VStack, } from '@chakra-ui/react'; + import DocumentTitle from '@/components/system/pages/DocumentTitle'; import PageContainer from '@/components/system/PageContainer'; import DashboardBackground from '@/components/system/pages/DashboardBackground'; @@ -32,6 +34,10 @@ const ConfigPage = () => { const [editableConfig, setEditableConfig] = useState(''); const [applying, setApplying] = useState(false); const [hasParsed, setHasParsed] = useState(false); + const [conmmand, setConmmand] = useState([]); + const [isPeizhi, setisPeizhi] = useState(false); + const [isApplying, setIsApplying] = useState(false); + const [applyStatus, setApplyStatus] = useState([]); const deviceCollection = createListCollection({ items: devices.map((device) => ({ @@ -55,6 +61,13 @@ const ConfigPage = () => { } try { + /** + const response = await api.parseCommand(inputText); + if (response) { + setParsedConfig(response); + setEditableConfig(response); + setHasParsed(true); + }**/ const performParse = async () => { if (testMode) { await Common.sleep(800 + Math.random() * 700); @@ -79,12 +92,16 @@ const ConfigPage = () => { }, }); - const result = await resultWrapper.unwrap(); - - if (result?.config) { - setParsedConfig(result.config); - setEditableConfig(result.config); + let result = await resultWrapper.unwrap(); + if (result?.data) { + setParsedConfig(JSON.stringify(result.data)); + setEditableConfig(JSON.stringify(result.data)); setHasParsed(true); + result = result.data; + if (result.config && Array.isArray(result.config.commands)) { + setConmmand(result.config.commands); + } + setisPeizhi(true); } } catch (error) { console.error('配置解析异常:', error); @@ -95,6 +112,37 @@ const ConfigPage = () => { } }; + const applyCommand = async (switch_ip, command, index) => { + try { + setApplyStatus((prevStatus) => { + const updated = [...prevStatus]; + updated[index] = 'in-progress'; + return updated; + }); + + const applyResult = testMode + ? await Common.sleep(1000) + : await api.applyConfig(switch_ip, [command]); + + if (applyResult?.data?.success) { + setApplyStatus((prevStatus) => { + const updated = [...prevStatus]; + updated[index] = 'success'; + return updated; + }); + } else { + Notification.error({ title: '命令应用失败', description: '请检查命令是否合法' }); + } + } catch (error) { + setApplyStatus((prevStatus) => { + const updated = [...prevStatus]; + updated[index] = 'failed'; + return updated; + }); + throw error; + } + }; + const handleApply = async () => { if (!editableConfig) { Notification.warn({ @@ -108,7 +156,7 @@ const ConfigPage = () => { try { const applyOperation = testMode ? Common.sleep(1000).then(() => ({ success: true })) - : await api.applyConfig(selectedDevice, editableConfig); + : await api.applyConfig(selectedDevice, conmmand); await Notification.promise({ promise: applyOperation, @@ -250,6 +298,143 @@ const ConfigPage = () => { )} + {isPeizhi && parsedConfig && ( + + + {(() => { + let parsed; + try { + parsed = JSON.parse(editableConfig); + } catch (e) { + return 配置 JSON 格式错误,无法解析。; + } + + const config = parsed.config ? [parsed.config] : parsed; + return config.map((cfg, idx) => ( + + + 配置类型: {cfg.type} + + + {Object.entries(cfg).map(([key, value]) => { + if (key === 'type' || key === 'commands') return null; + return ( + + {key} +