Revert "feat: fix the problem in the Operator Market frontend pages"

frontend/src/pages/SettingsPage/SystemConfig.tsx

@@ -1,228 +1,228 @@
-import { Input, Select, Switch, Button, Table, Spin } from "antd";
-import { useEffect, useState } from "react";
-import { getSysParamList, updateSysParamValue } from './settings.apis';
-
-interface SystemParam {
-  id: string;
-  paramValue: string;
-  description: string;
-  isEnabled: boolean;
-  paramType?: string;
-  optionList?: string;
-  isBuiltIn?: boolean;
-  canModify?: boolean;
-}
-
-export default function SystemConfig() {
-  const [sysParams, setSysParams] = useState<SystemParam[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [editingParams, setEditingParams] = useState<Record<string, string>>({});
-  const [tempEditingValues, setTempEditingValues] = useState<Record<string, string>>({});
-
-  // 获取系统参数列表
-  const fetchSysParams = async () => {
-    try {
-      setLoading(true);
-      const response = await getSysParamList();
-      setSysParams(response.data || []);
-      // 初始化编辑状态
-      const initialEditState: Record<string, string> = {};
-      response.data?.forEach((param: SystemParam) => {
-        initialEditState[param.id] = param.paramValue;
-      });
-      setEditingParams(initialEditState);
-    } catch (error) {
-      console.error('获取系统参数失败:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 组件加载时获取数据
-  useEffect(() => {
-    fetchSysParams();
-  }, []);
-
-  // 处理参数值更新 - 立即更新（用于开关和下拉框）
-  const handleImmediateUpdate = async (param: SystemParam, newValue: string | boolean) => {
-    try {
-      const stringValue = typeof newValue === 'boolean' ? newValue.toString() : newValue;
-      // 更新本地临时状态
-      setTempEditingValues(prev => ({ ...prev, [param.id]: stringValue }));
-      setEditingParams(prev => ({ ...prev, [param.id]: stringValue }));
-      
-      // 调用后端更新接口 - 修改为适应新的接口格式
-      await updateSysParamValue({
-        id: param.id,
-        paramValue: stringValue
-      });
-      
-      // 更新本地状态
-      setSysParams(prev => prev.map(p => 
-        p.id === param.id ? { ...p, paramValue: stringValue } : p
-      ));
-    } catch (error) {
-      console.error('更新参数失败:', error);
-      // 恢复原始值
-      setEditingParams(prev => ({ ...prev, [param.id]: param.paramValue }));
-      setTempEditingValues(prev => ({ ...prev, [param.id]: param.paramValue }));
-    }
-  };
-  
-  // 处理输入框值变化 - 仅更新临时状态
-  const handleInputChange = (param: SystemParam, newValue: string) => {
-    setTempEditingValues(prev => ({ ...prev, [param.id]: newValue }));
-  };
-  
-  // 处理输入框失焦 - 发起后端请求
-  const handleInputBlur = async (param: SystemParam) => {
-    const newValue = tempEditingValues[param.id];
-    if (newValue !== undefined && newValue !== param.paramValue) {
-      try {
-        // 调用后端更新接口
-        await updateSysParamValue({
-          id: param.id,
-          paramValue: newValue
-        });
-        
-        // 更新本地状态
-        setSysParams(prev => prev.map(p => 
-          p.id === param.id ? { ...p, paramValue: newValue } : p
-        ));
-        setEditingParams(prev => ({ ...prev, [param.id]: newValue }));
-      } catch (error) {
-        console.error('更新参数失败:', error);
-        // 恢复原始值
-        setTempEditingValues(prev => ({ ...prev, [param.id]: param.paramValue }));
-        setEditingParams(prev => ({ ...prev, [param.id]: param.paramValue }));
-      }
-    }
-  };
-
-
-  // 获取选项列表 - 解析逗号分隔的字符串
-  const getOptionList = (optionListStr?: string) => {
-    if (!optionListStr) return [];
-    try {
-      // 按逗号分割字符串并去除首尾空格
-      return optionListStr.split(',').map(option => ({
-        value: option.trim(),
-        label: option.trim()
-      }));
-    } catch (error) {
-      console.error('解析选项列表失败:', error);
-      return [];
-    }
-  };
-
-  // 表格列定义
-  const columns = [
-    {
-      title: "参数名",
-      dataIndex: "id",
-      key: "id",
-      width: 180,
-    },
-    {
-      title: "参数值",
-      dataIndex: "paramValue",
-      key: "paramValue",
-      width: 200,
-      render: (value: string, record: SystemParam) => {
-        // 使用临时编辑值或当前值
-        const displayValue = tempEditingValues[record.id] ?? editingParams[record.id] ?? value;
-        
-        // 对于boolean类型，使用开关按钮
-        if (record.paramType === 'boolean') {
-          const isChecked = displayValue.toLowerCase() === 'true';
-          return (
-            <Switch
-              checked={isChecked}
-              onChange={(checked) => handleImmediateUpdate(record, checked)}
-              disabled={!record.canModify}
-            />
-          );
-        }
-        
-        // 对于有选项列表的参数，强制使用下拉框
-        if (record.optionList && record.optionList.trim()) {
-          const options = getOptionList(record.optionList);
-          return (
-            <Select
-              value={displayValue}
-              onChange={(newValue) => handleImmediateUpdate(record, newValue)}
-              options={options}
-              disabled={!record.canModify}
-              style={{ width: '150px' }}
-              placeholder="请选择值"
-            />
-          );
-        }
-        
-        // 对于数字类型
-        if (record.paramType === 'integer' || record.paramType === 'number') {
-          return (
-            <Input
-              type="number"
-              value={displayValue}
-              onChange={(e) => handleInputChange(record, e.target.value)}
-              onBlur={() => handleInputBlur(record)}
-              disabled={!record.canModify}
-              style={{ width: '150px' }}
-            />
-          );
-        }
-        
-        // 默认为文本输入
-        return (
-          <Input
-            value={displayValue}
-            onChange={(e) => handleInputChange(record, e.target.value)}
-            onBlur={() => handleInputBlur(record)}
-            disabled={!record.canModify}
-            style={{ width: '150px' }}
-          />
-        );
-      },
-    },
-    {
-      title: "描述",
-      dataIndex: "description",
-      key: "description",
-      width: 300,
-    },
-    {
-      title: "是否启用",
-      dataIndex: "isEnabled",
-      key: "isEnabled",
-      width: 100,
-      render: (isEnabled: boolean) => (
-        <Switch checked={isEnabled} disabled={true} />
-      ),
-    }
-  ];
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="flex items-top justify-between">
-        <h2 className="text-lg font-medium mb-4">系统参数配置</h2>
-        <Button onClick={fetchSysParams}>刷新</Button>
-      </div>
-      <div className="flex-1 border-card overflow-auto p-6">
-        {loading ? (
-          <div className="flex justify-center items-center h-64">
-            <Spin size="large" />
-          </div>
-        ) : (
-          <Table 
-            columns={columns} 
-            dataSource={sysParams} 
-            pagination={false}
-            size="middle"
-            rowKey="id"
-          />
-        )}
-      </div>
-    </div>
-  );
+import { Input, Select, Switch, Button, Table, Spin } from "antd";
+import { useEffect, useState } from "react";
+import { getSysParamList, updateSysParamValue } from './settings.apis';
+
+interface SystemParam {
+  id: string;
+  paramValue: string;
+  description: string;
+  isEnabled: boolean;
+  paramType?: string;
+  optionList?: string;
+  isBuiltIn?: boolean;
+  canModify?: boolean;
+}
+
+export default function SystemConfig() {
+  const [sysParams, setSysParams] = useState<SystemParam[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editingParams, setEditingParams] = useState<Record<string, string>>({});
+  const [tempEditingValues, setTempEditingValues] = useState<Record<string, string>>({});
+
+  // 获取系统参数列表
+  const fetchSysParams = async () => {
+    try {
+      setLoading(true);
+      const response = await getSysParamList();
+      setSysParams(response.data || []);
+      // 初始化编辑状态
+      const initialEditState: Record<string, string> = {};
+      response.data?.forEach((param: SystemParam) => {
+        initialEditState[param.id] = param.paramValue;
+      });
+      setEditingParams(initialEditState);
+    } catch (error) {
+      console.error('获取系统参数失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 组件加载时获取数据
+  useEffect(() => {
+    fetchSysParams();
+  }, []);
+
+  // 处理参数值更新 - 立即更新（用于开关和下拉框）
+  const handleImmediateUpdate = async (param: SystemParam, newValue: string | boolean) => {
+    try {
+      const stringValue = typeof newValue === 'boolean' ? newValue.toString() : newValue;
+      // 更新本地临时状态
+      setTempEditingValues(prev => ({ ...prev, [param.id]: stringValue }));
+      setEditingParams(prev => ({ ...prev, [param.id]: stringValue }));
+      
+      // 调用后端更新接口 - 修改为适应新的接口格式
+      await updateSysParamValue({
+        id: param.id,
+        paramValue: stringValue
+      });
+      
+      // 更新本地状态
+      setSysParams(prev => prev.map(p => 
+        p.id === param.id ? { ...p, paramValue: stringValue } : p
+      ));
+    } catch (error) {
+      console.error('更新参数失败:', error);
+      // 恢复原始值
+      setEditingParams(prev => ({ ...prev, [param.id]: param.paramValue }));
+      setTempEditingValues(prev => ({ ...prev, [param.id]: param.paramValue }));
+    }
+  };
+  
+  // 处理输入框值变化 - 仅更新临时状态
+  const handleInputChange = (param: SystemParam, newValue: string) => {
+    setTempEditingValues(prev => ({ ...prev, [param.id]: newValue }));
+  };
+  
+  // 处理输入框失焦 - 发起后端请求
+  const handleInputBlur = async (param: SystemParam) => {
+    const newValue = tempEditingValues[param.id];
+    if (newValue !== undefined && newValue !== param.paramValue) {
+      try {
+        // 调用后端更新接口
+        await updateSysParamValue({
+          id: param.id,
+          paramValue: newValue
+        });
+        
+        // 更新本地状态
+        setSysParams(prev => prev.map(p => 
+          p.id === param.id ? { ...p, paramValue: newValue } : p
+        ));
+        setEditingParams(prev => ({ ...prev, [param.id]: newValue }));
+      } catch (error) {
+        console.error('更新参数失败:', error);
+        // 恢复原始值
+        setTempEditingValues(prev => ({ ...prev, [param.id]: param.paramValue }));
+        setEditingParams(prev => ({ ...prev, [param.id]: param.paramValue }));
+      }
+    }
+  };
+
+
+  // 获取选项列表 - 解析逗号分隔的字符串
+  const getOptionList = (optionListStr?: string) => {
+    if (!optionListStr) return [];
+    try {
+      // 按逗号分割字符串并去除首尾空格
+      return optionListStr.split(',').map(option => ({
+        value: option.trim(),
+        label: option.trim()
+      }));
+    } catch (error) {
+      console.error('解析选项列表失败:', error);
+      return [];
+    }
+  };
+
+  // 表格列定义
+  const columns = [
+    {
+      title: "参数名",
+      dataIndex: "id",
+      key: "id",
+      width: 180,
+    },
+    {
+      title: "参数值",
+      dataIndex: "paramValue",
+      key: "paramValue",
+      width: 200,
+      render: (value: string, record: SystemParam) => {
+        // 使用临时编辑值或当前值
+        const displayValue = tempEditingValues[record.id] ?? editingParams[record.id] ?? value;
+        
+        // 对于boolean类型，使用开关按钮
+        if (record.paramType === 'boolean') {
+          const isChecked = displayValue.toLowerCase() === 'true';
+          return (
+            <Switch
+              checked={isChecked}
+              onChange={(checked) => handleImmediateUpdate(record, checked)}
+              disabled={!record.canModify}
+            />
+          );
+        }
+        
+        // 对于有选项列表的参数，强制使用下拉框
+        if (record.optionList && record.optionList.trim()) {
+          const options = getOptionList(record.optionList);
+          return (
+            <Select
+              value={displayValue}
+              onChange={(newValue) => handleImmediateUpdate(record, newValue)}
+              options={options}
+              disabled={!record.canModify}
+              style={{ width: '150px' }}
+              placeholder="请选择值"
+            />
+          );
+        }
+        
+        // 对于数字类型
+        if (record.paramType === 'integer' || record.paramType === 'number') {
+          return (
+            <Input
+              type="number"
+              value={displayValue}
+              onChange={(e) => handleInputChange(record, e.target.value)}
+              onBlur={() => handleInputBlur(record)}
+              disabled={!record.canModify}
+              style={{ width: '150px' }}
+            />
+          );
+        }
+        
+        // 默认为文本输入
+        return (
+          <Input
+            value={displayValue}
+            onChange={(e) => handleInputChange(record, e.target.value)}
+            onBlur={() => handleInputBlur(record)}
+            disabled={!record.canModify}
+            style={{ width: '150px' }}
+          />
+        );
+      },
+    },
+    {
+      title: "描述",
+      dataIndex: "description",
+      key: "description",
+      width: 300,
+    },
+    {
+      title: "是否启用",
+      dataIndex: "isEnabled",
+      key: "isEnabled",
+      width: 100,
+      render: (isEnabled: boolean) => (
+        <Switch checked={isEnabled} disabled={true} />
+      ),
+    }
+  ];
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex items-top justify-between">
+        <h2 className="text-lg font-medium mb-4">系统参数配置</h2>
+        <Button onClick={fetchSysParams}>刷新</Button>
+      </div>
+      <div className="flex-1 border-card overflow-auto p-6">
+        {loading ? (
+          <div className="flex justify-center items-center h-64">
+            <Spin size="large" />
+          </div>
+        ) : (
+          <Table 
+            columns={columns} 
+            dataSource={sysParams} 
+            pagination={false}
+            size="middle"
+            rowKey="id"
+          />
+        )}
+      </div>
+    </div>
+  );
 }