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

app/routes/rules-new.tsx

@@ -237,25 +237,39 @@ export default function RuleNew() {
       setIsLoading(true);
       console.log(`获取评查点数据，ID: ${id}`);
       // 使用 postgrestGet 替代直接调用 fetch
-    const postgrestParams = {
+      const postgrestParams = {
-      filter: {
+        filter: {
-        'id': `eq.${id}`
+          'id': `eq.${id}`
-      }
+        }
-    };
+      };
       const response = await postgrestGet('evaluation_points', postgrestParams);
 
       if (response.data && Array.isArray(response.data) && response.data[0]) {
         
         if (response.data.length > 0) {
-          const data = response.data[0]
+          try {
-          setFormData(data);
+            // 使用JSON序列化和反序列化来进行深拷贝，避免浏览器差异
-          
+            const originalData = response.data[0];
-          // 初始化extractionFields
+            const jsonString = JSON.stringify(originalData);
-          const extractedFields = extractFieldsFromFormData(data);
+            const data = JSON.parse(jsonString);
-          setExtractionFields(extractedFields);
+            
-          
+            console.log("数据已经过深拷贝处理，避免浏览器兼容性问题");
-          // 设置编辑模式的实例键
+            
-          setInstanceKey(`edit_${id}_${Date.now()}`);
+            // 设置表单数据
+            setFormData(data);
+            
+            // 初始化extractionFields
+            const extractedFields = extractFieldsFromFormData(data);
+            setExtractionFields(extractedFields);
+            
+            // 设置编辑模式的实例键
+            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,61 +462,71 @@ export default function RuleNew() {
         delete cleanedData.id;
       }
       
-      // 确保extraction_config和evaluation_config是有效的JSON对象
-      // 通过先序列化再解析来验证
       try {
-        JSON.parse(JSON.stringify(cleanedData.extraction_config));
+        // 使用JSON序列化和反序列化来进行深拷贝，避免浏览器差异
-      } catch (e) {
+        const jsonString = JSON.stringify(cleanedData);
-        throw new Error("extraction_config 格式无效");
+        const finalData = JSON.parse(jsonString);
-      }
-      
-      try {
-        JSON.parse(JSON.stringify(cleanedData.evaluation_config));
-      } catch (e) {
-        throw new Error("evaluation_config 格式无效");
-      }
-      
-      // 检查JSON字符串长度，如果太长可能会被截断
-      const jsonData = JSON.stringify(cleanedData);
-      const maxLength = 65536; // 通常PostgreSQL的jsonb列可以存储的最大长度
-      
-      if (jsonData.length > maxLength) {
-        throw new Error(`数据大小超过限制 (${jsonData.length} > ${maxLength})`);
-      }
-      
-      console.log("准备提交到API的数据：", cleanedData);
-      console.log("JSON数据长度:", jsonData.length);
-
-      let response;
-
-      if (isEditMode) {
-        response = await postgrestPut('evaluation_points', cleanedData, {id: formData.id!});
-      } else {
-        response = await postgrestPost('evaluation_points', cleanedData);
-      }
-
-      if (response.error) {
-        alert(`系统繁忙: ${response.error}`);
-      } else if (response.data && Array.isArray(response.data) && response.data.length > 0) {
-        // 获取新创建或更新的评查点ID
-        const savedPointId = response.data[0]?.id;
         
-        if (savedPointId) {
+        // 确保extraction_config和evaluation_config是有效的JSON对象
-          // 显示成功消息
+        try {
-          alert(`评查点${isEditMode ? '更新' : '创建'}成功!`);
+          JSON.parse(JSON.stringify(finalData.extraction_config));
-          
+        } catch (e) {
-          // 保存成功后跳转到编辑页面并重新加载数据
+          throw new Error("extraction_config 格式无效");
-          navigate(`/rules-new?id=${savedPointId}`, { replace: true });
-          // 重新获取评查点数据
-          await fetchEvaluationPoint(savedPointId);
-        } else {
-          // 无法获取ID的情况
-          alert(`评查点${isEditMode ? '更新' : '创建'}成功，但无法获取ID。正在返回列表页面。`);
-          navigate('/rules');
         }
-      } else {
+        
-        alert(`系统繁忙`);
+        try {
+          JSON.parse(JSON.stringify(finalData.evaluation_config));
+        } catch (e) {
+          throw new Error("evaluation_config 格式无效");
+        }
+        
+        // 检查JSON字符串长度，如果太长可能会被截断
+        const dataLength = jsonString.length;
+        const maxLength = 65536; // 通常PostgreSQL的jsonb列可以存储的最大长度
+        
+        if (dataLength > maxLength) {
+          throw new Error(`数据大小超过限制 (${dataLength} > ${maxLength})`);
+        }
+        
+        console.log("准备提交到API的数据（已经过深拷贝处理）:", finalData);
+        console.log("JSON数据长度:", dataLength);
+
+        let response;
+        if (isEditMode) {
+          response = await postgrestPut('evaluation_points', finalData, {id: formData.id!});
+        } else {
+          response = await postgrestPost('evaluation_points', finalData);
+        }
+
+        if (response.error) {
+          alert(`系统繁忙: ${response.error}`);
+        } else if (response.data && Array.isArray(response.data) && response.data.length > 0) {
+          // 获取新创建或更新的评查点ID
+          const savedPointId = response.data[0]?.id;
+          
+          if (savedPointId) {
+            // 显示成功消息
+            alert(`评查点${isEditMode ? '更新' : '创建'}成功!`);
+            
+            // 保存成功后跳转到编辑页面并重新加载数据
+            navigate(`/rules-new?id=${savedPointId}`, { replace: true });
+            // 重新获取评查点数据
+            await fetchEvaluationPoint(savedPointId);
+          } else {
+            // 无法获取ID的情况
+            alert(`评查点${isEditMode ? '更新' : '创建'}成功，但无法获取ID。正在返回列表页面。`);
+            navigate('/rules');
+          }
+        } 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 : '未知错误'}`);