修复state变量问题

src/frontend/src/pages/ConfigPage.jsx

@@ -61,13 +61,6 @@ 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);
@@ -112,37 +105,6 @@ 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({
@@ -153,6 +115,7 @@ const ConfigPage = () => {
     }
 
     setApplying(true);
+    setIsApplying(true);
     try {
       const applyOperation = testMode
         ? Common.sleep(1000).then(() => ({ success: true }))
@@ -230,8 +193,10 @@ const ConfigPage = () => {
               </Field.Label>
               <Textarea
                 rows={4}
-                placeholder={'例子：创建VLAN 10并配置IP 192.168.10.1/24并在端口1启用SSH访问"'}
+                placeholder={'例：创建VLAN 10并配置IP 192.168.10.1/24并在端口1启用SSH访问"'}
                 value={inputText}
+                colorPalette={'teal'}
+                orientation={'vertical'}
                 onChange={(e) => setInputText(e.target.value)}
                 bg={'whiteAlpha.200'}
                 size={'sm'}
@@ -248,56 +213,6 @@ const ConfigPage = () => {
               解析配置
             </Button>
 
-            {hasParsed && (
-              <FadeInWrapper>
-                <Box
-                  p={4}
-                  bg={'whiteAlpha.100'}
-                  borderRadius={'xl'}
-                  border={'1px solid'}
-                  borderColor={'whiteAlpha.300'}
-                >
-                  <Text fontWeight={'bold'} mb={2} fontSize="sm">
-                    生成配置:
-                  </Text>
-                  <Textarea
-                    value={JSON.stringify(editableConfig)}
-                    rows={12}
-                    onChange={(e) => setEditableConfig(e.target.value)}
-                    fontFamily={'monospace'}
-                    size={'sm'}
-                    bg={'blackAlpha.200'}
-                    whiteSpace="pre-wrap"
-                  />
-
-                  <HStack mt={4} spacing={3} justify={'flex-end'}>
-                    <Button
-                      variant={'outline'}
-                      colorScheme={'gray'}
-                      size={'sm'}
-                      onClick={() => {
-                        setEditableConfig(parsedConfig);
-                        Notification.success({
-                          title: '成功重置配置！',
-                          description: '现在您可以重新审查生成的配置',
-                        });
-                      }}
-                    >
-                      重置为原始配置
-                    </Button>
-                    <Button
-                      colorScheme={'teal'}
-                      size={'sm'}
-                      onClick={handleApply}
-                      isLoading={applying}
-                      isDisabled={!editableConfig}
-                    >
-                      应用到交换机
-                    </Button>
-                  </HStack>
-                </Box>
-              </FadeInWrapper>
-            )}
             {isPeizhi && parsedConfig && (
               <FadeInWrapper delay={0.2}>
                 <VStack spacing={4} align={'stretch'}>
@@ -306,7 +221,7 @@ const ConfigPage = () => {
                     try {
                       parsed = JSON.parse(editableConfig);
                     } catch (e) {
-                      return <Text color={'red.300'}>配置 JSON 格式错误，无法解析。</Text>;
+                      return <Text color={'red.300'}>配置 JSON 格式错误，无法解析</Text>;
                     }
 
                     const config = parsed.config ? [parsed.config] : parsed;
@@ -319,7 +234,7 @@ const ConfigPage = () => {
                         border={'1px solid'}
                         borderColor={'whiteAlpha.300'}
                       >
-                        <Text fontSize="lg" fontWeight="bold" mb={2}>
+                        <Text fontSize={'lg'} fontWeight={'bold'} mb={2}>
                           配置类型: {cfg.type}
                         </Text>
 
@@ -341,9 +256,9 @@ const ConfigPage = () => {
                                   const updated = JSON.parse(editableConfig);
                                   updated.config[key] = newVal;
                                   setEditableConfig(JSON.stringify(updated, null, 2));
+                                  setConmmand(updated);
                                 }}
                               />
-                              <Field.HelperText>可编辑字段: {key}</Field.HelperText>
                             </Field.Root>
                           );
                         })}
@@ -353,7 +268,7 @@ const ConfigPage = () => {
                         </Text>
                         {cfg.commands?.map((cmd, i) => (
                           <Field.Root key={i} colorPalette={'teal'} orientation={'vertical'} mb={2}>
-                            <Field.Label fontSize="sm">命令 #{i + 1}</Field.Label>
+                            <Field.Label fontSize="sm">命令 {i + 1}</Field.Label>
                             <Textarea
                               size={'sm'}
                               fontFamily={'monospace'}
@@ -367,11 +282,26 @@ const ConfigPage = () => {
                             />
                           </Field.Root>
                         ))}
+                        <HStack mt={4} spacing={3} justify={'flex-end'}>
+                          <Button
+                            variant={'outline'}
+                            colorScheme={'gray'}
+                            size={'sm'}
+                            onClick={() => {
+                              setEditableConfig(parsedConfig);
+                              Notification.success({
+                                title: '成功重置配置！',
+                                description: '现在您可以重新审查生成的配置',
+                              });
+                            }}
+                          >
+                            重置为原始配置
+                          </Button>
 
                           <Button
                             size={'sm'}
-                          mt={3}
+                            variant={'outline'}
-                          colorScheme={'teal'}
+                            colorScheme={'gray'}
                             onClick={() => {
                               Notification.success({
                                 title: `配置 ${cfg.type} 已保存`,
@@ -381,10 +311,22 @@ const ConfigPage = () => {
                           >
                             保存当前配置
                           </Button>
+
+                          <Button
+                            colorScheme={'teal'}
+                            size={'sm'}
+                            onClick={handleApply}
+                            isLoading={applying}
+                            isDisabled={!editableConfig}
+                          >
+                            应用到交换机
+                          </Button>
+                        </HStack>
                       </Box>
                     ));
                   })()}
-                  {isApplying && (
+
+                  {
                     <FadeInWrapper delay={0.2}>
                       <VStack spacing={4} align={'stretch'}>
                         <Box
@@ -398,7 +340,7 @@ const ConfigPage = () => {
                             应用配置命令
                           </Text>
                           <Box>
-                            {conmmand.map((command, index) => (
+                            {JSON.parse(editableConfig).config?.commands.map((command, index) => (
                               <HStack key={index} mb={2}>
                                 <Text fontSize={'sm'} flex={1}>
                                   {command}
@@ -431,7 +373,7 @@ const ConfigPage = () => {
                         </Box>
                       </VStack>
                     </FadeInWrapper>
-                  )}
+                  }
                 </VStack>
               </FadeInWrapper>
             )}