修复谷歌浏览器无法渲染数据问题

app/routes/rules-new.tsx

@@ -247,7 +247,15 @@ export default function RuleNew() {
       if (response.data && Array.isArray(response.data) && response.data[0]) {
         
         if (response.data.length > 0) {
-          const data = response.data[0]
+          try {
+            // 使用JSON序列化和反序列化来进行深拷贝，避免浏览器差异
+            const originalData = response.data[0];
+            const jsonString = JSON.stringify(originalData);
+            const data = JSON.parse(jsonString);
+            
+            console.log("数据已经过深拷贝处理，避免浏览器兼容性问题");
+            
+            // 设置表单数据
             setFormData(data);
             
             // 初始化extractionFields
@@ -256,6 +264,12 @@ export default function RuleNew() {
             
             // 设置编辑模式的实例键
             setInstanceKey(`edit_${id}_${Date.now()}`);
+          } catch (jsonError) {
+            console.error('JSON处理错误:', jsonError);
+            alert(`数据处理错误: ${jsonError instanceof Error ? jsonError.message : '未知错误'}`);
+            resetFormData();
+            navigate('/rules');
+          }
         } else {
           console.error('获取数据失败: 返回数据为空');
           alert('获取数据失败: 返回数据为空');
@@ -448,37 +462,40 @@ export default function RuleNew() {
         delete cleanedData.id;
       }
       
-      // 确保extraction_config和evaluation_config是有效的JSON对象
-      // 通过先序列化再解析来验证
       try {
-        JSON.parse(JSON.stringify(cleanedData.extraction_config));
+        // 使用JSON序列化和反序列化来进行深拷贝，避免浏览器差异
+        const jsonString = JSON.stringify(cleanedData);
+        const finalData = JSON.parse(jsonString);
+        
+        // 确保extraction_config和evaluation_config是有效的JSON对象
+        try {
+          JSON.parse(JSON.stringify(finalData.extraction_config));
         } catch (e) {
           throw new Error("extraction_config 格式无效");
         }
         
         try {
-        JSON.parse(JSON.stringify(cleanedData.evaluation_config));
+          JSON.parse(JSON.stringify(finalData.evaluation_config));
         } catch (e) {
           throw new Error("evaluation_config 格式无效");
         }
         
         // 检查JSON字符串长度，如果太长可能会被截断
-      const jsonData = JSON.stringify(cleanedData);
+        const dataLength = jsonString.length;
         const maxLength = 65536; // 通常PostgreSQL的jsonb列可以存储的最大长度
         
-      if (jsonData.length > maxLength) {
+        if (dataLength > maxLength) {
-        throw new Error(`数据大小超过限制 (${jsonData.length} > ${maxLength})`);
+          throw new Error(`数据大小超过限制 (${dataLength} > ${maxLength})`);
         }
         
-      console.log("准备提交到API的数据：", cleanedData);
+        console.log("准备提交到API的数据（已经过深拷贝处理）:", finalData);
-      console.log("JSON数据长度:", jsonData.length);
+        console.log("JSON数据长度:", dataLength);
 
         let response;
-
         if (isEditMode) {
-        response = await postgrestPut('evaluation_points', cleanedData, {id: formData.id!});
+          response = await postgrestPut('evaluation_points', finalData, {id: formData.id!});
         } else {
-        response = await postgrestPost('evaluation_points', cleanedData);
+          response = await postgrestPost('evaluation_points', finalData);
         }
 
         if (response.error) {
@@ -503,6 +520,13 @@ export default function RuleNew() {
         } else {
           alert(`系统繁忙`);
         }
+      } catch (jsonError) {
+        console.error("JSON处理错误:", jsonError);
+        alert(`数据处理错误: ${jsonError instanceof Error ? jsonError.message : '未知错误'}`);
+        setIsLoading(false);
+        return;
+      }
+      
     } catch (error) {
       console.error("数据处理错误:", error);
       alert(`数据处理错误: ${error instanceof Error ? error.message : '未知错误'}`);